Question

这是我的customer.jsx文件 customer.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的属性向下传递到组件。

Answer 2

道具是从render传递过来的，您需要明确地传递它们：

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

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

网址参数未显示Reactjs

2 个答案: