Route Param无法与React一起使用

Question

I am trying to use Route params but I cannot get the params.

The page simply shows nothing, seems like undefined or blank.

How do I get the param from "wedding/:pageName"?

What is missing here? Is it the best way to get params?

The "pageName" is not ID, is it a problem?

Thanks in advance

My 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; 

WeddingPage.js

 import React, { Component } from 'react'; class WeddingPage extends Component { render() { return ( <div> {this.props.pageName} </div> ); } } export default WeddingPage; 

Answer 1

使用React Router，您可以使用this.props.match.params.pageName访问路由器参数。

Answer 2

In your case, first you need to get pageName params in Wedding component like this.props.match.params.pageName
and than further pass pageName props to weddingPage component like
<WeddingPage pageName={this.props.match.params.pageName} />

Answer 3

It's because you aren't passing props through from Wedding to WeddingPage .

Wedding.js needs to accept and pass props to it's child:

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;