реакции-маршрутизатор - не может получить информацию в this.props.location - PullRequest
Новая
       20

реакции-маршрутизатор - не может получить информацию в this.props.location

0 голосов
/ 19 октября 2018

У меня есть приложение, созданное из create-реагировать-app, и расположение опоры для всех моих компонентов всегда неопределено ..

Вот 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>)

Я получаю неопределенное значение и не понимаю, почему ... Я использую "react-router-dom": "^4.3.1" в соответствии с моимpackage.json

Пожалуйста, помогите!

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Я думаю, вам нужно использовать withRouter HOC для вашего EditUser Component, чтобы внедрить реквизиты, подобные расположению.

См. response-router получение this.props.location в дочерних компонентах

0 голосов
/ 19 октября 2018

Вам необходимо передать реквизиты маршрутизатора в компонент, так как вы используете 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>
            );
        }
    }
}
...