Блог

Главная - Вопросы по программированию - React router dom не отображает дочерний компонент, но URL изменен

React router dom не отображает дочерний компонент, но URL изменен

#reactjs #react-router #react-router-dom

#reactjs #react-маршрутизатор #react-router-dom

Вопрос:

У меня есть дочерние маршруты, и когда я пытаюсь изменить маршруты в AppMain.js он изменяет URL, но компонент не отображается, вместо этого существующий компонент отображается повторно. Но если я делаю ту же историю.нажмите внутри Dashboard или BatteryTable маршрут работает нормально.

App.js

 <Router>
  <Route exact path="/" component={withRouter(Auth)} />
  <Route path="/main" component={withRouter(AppMain)} />
</Router>

AppMain.js

 constructor(props) {
    super(props)
    this.props.history.push('/main/dashboard')  
}

render() {
    return(
        <Routes match={match} />
    )
}

Routes.js

 <Router>
    <Switch>
        <Route path={`${this.props.match.path}/dashboard`} component={withRouter(Dashboard)} />
        <Route path={`${this.props.match.path}/batterytable`} component={withRouter(BatteryTable)} />
    </Switch>
</Router>

Комментарии:

1. может быть, потому, что вы используете два маршрутизатора hoc, удалите из Routes.js компонент, используйте только в компоненте приложения. Также, когда вы визуализируете компонент с маршрутным путем withRouter , не требуется, удалите это также.

2. @MayankShukla Тогда как будет работать дочерний маршрут?

3. это будет работать, нам нужен только один экземпляр Router , он должен быть оболочкой только всего приложения. он будет отслеживать все изменения маршрута и траектории.

4. @MayankShukla Не могли бы вы опубликовать это в качестве ответа. Большое спасибо.

Ответ №1:

Поскольку вы используете Router компонент дважды, удалите его из Routes.js файла, нам нужно использовать его только один раз, как оболочку всего приложения.

Используйте этот код в Routes.js файле:

 <Switch>
    <Route path={`${this.props.match.path}/dashboard`} component={withRouter(Dashboard)} />
    <Route path={`${this.props.match.path}/batterytable`} component={withRouter(BatteryTable)} />
</Switch>

Предложение:

Поскольку вы передаете Auth и AppMain напрямую с маршрутным путем, поэтому вам не нужно использовать withRouter . Эти компоненты напрямую получат все реквизиты маршрутизатора.