Url参数未显示Reactjs

Question

这是我的customers.jsx文件customers.jsx是主文件在这里主要代码就在那里

<Route path="/data/:gender1"
       exact
       render={() => {
           return (
               <div >
                   <Customers2/>
               </div>
           );
       }}
/>

这是我的customers2.jsx文件

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    NavLink,
    Redirect
} from 'react-router-dom';
import {browserHistory} from 'react-router';

class Customers2 extends Component {
    constructor() {
        super();

        console.log(this);
    }


    render() {
        console.log("ss" );
        console.log(this.props);
        return (
            <div>

            </div>            
        );
    }
}

export default Customers2;

如果我去localhost：3000 / data / Male

在控制台中我没有看到任何道具与数据有什么不对？

Answer 1

<Route 
   path="/data/:gender1" 
   exact 
   render={props) => {
       return(
          <div>
            <Customers2 {...props} />
          </div>
        );
    }}
/>

您还需要将react-router的props传递给组件。

Answer 2

道具从render传递，您需要明确传递：

<Route path="/data/:gender1" exact render={({match) => 
   <Customers2 gender={match.params.gender1} />
} />

有关更多信息，请参阅the documentation on route props和match object