Question

我有一个由create-react-app创建的应用，并且我所有组件的prop位置始终未定义。.

这是index.js

    ReactDOM.render((
<BrowserRouter >
<App/>
</BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();

这是app.js的简短版本

import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      auth: UserProfile.getAuth(),
    }

  }

  render() {
    if(this.state.auth){
      return (
        <Router>
          <Switch>
            ...
            <Route path="/editUser" render={()=><EditUser className="App" app={this}/>} />
          </Switch>
        </Router>
      );
    }

    else{
      ...
    }
  }
}

现在这里是editUser.jsx

class EditUser extends React.Component {
  constructor(props) {
    super(props);
...
}

componentDidMount(){
    console.log(this.props.location) //undefined
  }

render() {
return (<div>...</div>)

我一直都不确定，我也不明白为什么... 我根据我的package.json

使用"react-router-dom": "^4.3.1"

请帮助！

Answer 1

由于您正在使用render组件的<Route/>道具，因此需要将路由器道具传递给该组件。

此外，在您的App组件中，您不需要BrowserRouter as Router，因为您已经将<App/>包装在index.js中。我更改了import并删除了包装的<Router/>组件。

import { Route, Switch } from 'react-router-dom';

class App extends React.Component {
    ...
    render() {
        if (this.state.auth) {
            return (
                <Switch>
                    ...
                    <Route path="/editUser" render={props =>
                        <EditUser {...props} className="App" app={this}/>
                    }/>
                </Switch>
            );
        }
    }
}

Answer 2

我认为您需要在EditUser组件上使用withRouter HOC，以便注入诸如位置之类的道具。

请参见react-router getting this.props.location in child components

react-router-无法在this.props.location中获取信息

2 个答案: