我正在尝试使用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;
Wedding.js
import React from 'react';
import WeddingPage from './weddings/WeddingPage';
const Wedding = () => {
return (
<div>
<WeddingPage />
</div>
);
}
export default Wedding;
&#13;
WeddingPage.js
import React, { Component } from 'react';
class WeddingPage extends Component {
render() {
return (
<div>
{this.props.pageName}
</div>
);
}
}
export default WeddingPage;
&#13;
答案 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