Route Param无法使用React

时间:2017-10-09 15:00:52

标签: node.js reactjs react-router routeparams

我正在尝试使用Route params,但我无法获得params。

该页面只显示任何内容,似乎未定义或空白。

如何从" wedding /:pageName"?

获取参数

这里缺少什么?这是获得参数的最佳方法吗?

" pageName"不是身份证,这是一个问题吗?

提前致谢

我的App.js



import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';

import Header from './Header';
import Weddings from './Weddings';

class App extends Component {
  render() {
    return (
      <div className="container">
        <BrowserRouter>
          <div className="container">
            <Header />
            <Route path="/wedding/:pageName" component={Wedding} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default connect(null, actions)(App);
&#13;
&#13;
&#13;

Wedding.js

&#13;
&#13;
import React from 'react';
import WeddingPage from './weddings/WeddingPage';

const Wedding = () => {
  return (
    <div>
      <WeddingPage />
    </div>
  );
}

export default Wedding;
&#13;
&#13;
&#13;

WeddingPage.js

&#13;
&#13;
import React, { Component } from 'react';

class WeddingPage extends Component {
  render() {
    return (
      <div>
        {this.props.pageName}
      </div>
    );
  }
}

export default WeddingPage;
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

使用react路由器,您可以访问路由器参数this.props.match.params.pageName

答案 1 :(得分:0)

在您的情况下,首先需要在Wedding组件中获取pageName参数 this.props.match.params.pageName
并进一步将pageName props传递给weddingPage组件,如
<WeddingPage pageName={this.props.match.params.pageName} />

答案 2 :(得分:0)

这是因为您没有将道具从parentFolderID传递到Wedding

WeddingPage需要接受并将Wedding.js传递给它的孩子:

props

import React from 'react'; import WeddingPage from './weddings/WeddingPage'; const Wedding = props => { return ( <div> <WeddingPage {...props} /> </div> ); } export default Wedding;

WeddingPage.js