Реакция роутера dom не рендерит дочерний компонент, но URL изменился - PullRequest
Новая
       1

Реакция роутера dom не рендерит дочерний компонент, но URL изменился

0 голосов
/ 05 апреля 2019

У меня есть дочерние маршруты, и когда я пытаюсь изменить маршруты в AppMain.js, он изменяет URL-адрес, но компонент не обрабатывается, вместо этого существующий компонент повторно визуализируется. Но если я делаю то же самое history.push внутри 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 Ответ

0 голосов
/ 05 апреля 2019

Это потому, что вы используете компонент 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. Эти компоненты будут напрямую получать все реквизиты маршрутизатора.

...