Вложенные маршруты React-router с помощью history.push
У меня есть страница реакции, которая отображает либо страницу входа, либо компонент navbar + container на основе текущего маршрута. Я не хочу, чтобы панель навигации была видна на странице входа. Таким образом, мое приложение структурировано следующим образом:
index.js
ReactDOM.render(<Main/>, document.getElementById('root'));
Main.js
<Router>
<Switch>
<Route path = "/login" component = {Login} />
<PrivateRoute path = "/" component = {App} />
</Switch>
</Router>
App.js
<Router>
<div className = "App">
<Navbar/>
<div className = "main-container">
<Switch>
<Route exact path = "/" component = {Container1}/>
<Route path = "/route1" component = {Container2}/>
<Route path = "/route2" component = {Container3}/>
</Switch>
</div>
</div>
</Router>
Теперь, если внутри любого из компонентов контейнера я хочу выполнить this.props.history.push ('/ login'), он влияет только на ближайший <Switch> и, таким образом, не отображает ничего в области контейнера (поскольку маршруты не совпадают), но сохраняет панель навигации видимой. Как я могу заставить родительский <Switch> из Main.js решать, что отображать при программном изменении маршрута? Стоит ли структурировать приложение как-то иначе?
Спасибо.
Думаю, я здесь ошибся. Попробуйте удалить оболочку маршрутизатора из приложения и используйте вместо нее withRouter.
Это сработало именно так, как я хотел. Итак, если я правильно понимаю, я создавал другой маршрутизатор, который мне здесь не нужен. Спасибо! Я создам ответ на основе этого и доверяю вам.
У меня была такая же проблема только вчера, мне помогла эта статья github.com/ReactTraining/react-router/blob/master/packages/…
Ура за ссылку!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете определять разные наборы маршрутов. Маршруты по умолчанию, которые всегда будут отображать вашу навигационную панель, и другие маршруты, которые не отображаются.
class App extends React.Component{
render(){
const DefaultRoutes = () => {
return(
<div>
<Navbar/>
<Switch>
<Route path = "/" component = {Landing} exact = {true}/>
</Switch>
<Footer/>
</div>
)
}
return(
<Provider store = {store}>
<BrowserRouter>
<div className = "App">
<Switch>
<Route path = "/alternate" component = {alternateComponent} exact/>
<Route component = {DefaultRoutes}/>
</Switch>
</div>
</BrowserRouter>
</Provider>
)
}
}
Итак, с этой настройкой вы можете видеть, что DefaultRoutes всегда будет использовать Navbar. Но это не относится к Маршруту с альтернативным путем. По сути, просто оберните ваши маршруты, которые вы хотите, чтобы отображалось "нормальное" поведение, в DefaultRoutes. И определите любые другие маршруты вне этой коллекции. Это работает благодаря Switch, который будет отображать только маршруты.
Уловка заключалась в том, чтобы удалить лишний <Router> из App.js и экспортировать его с помощью withRouter (App) в конце файла. Спасибо Ненад Врачар
Здесь это ничего не даст. withRouter добавляет функциональность к уже существующим компонентам при использовании свойства компонента Route.