路由参数不能与反应

Question

我想使用路由参数，但我不能得到参数。

该页面什么都不显示，看起来像未定义或空白。

如何从“wedding /：pageName”获取参数？

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

“pageName”不是ID，是否有问题？

在此先感谢

我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);

Wedding.js

import React from 'react'; 
 
import WeddingPage from './weddings/WeddingPage'; 
 

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

 
export default Wedding;

Weddi ngPage.js

import React, { Component } from 'react'; 
 

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

 
export default WeddingPage;

Answer 1

这是因为你没有通过从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：

import React, { Component } from 'react'; 

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

export default WeddingPage; 

Answer 2

随着反应的路由器，您可以访问路由器PARAMS作为this.props.match.params.pageName

Answer 3

在你的情况，你首先需要获得页面名PARAMS在Wedding部件等 this.props.match.params.pageName
和比进一步通过页面名道具weddingPage部件等
<WeddingPage pageName={this.props.match.params.pageName} />