React-роутер вложенных маршрутов с history.push

Question

У меня есть страница реакции, которая отображает либо страницу входа, либо компонент 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>

Теперь, если внутри какого-либо из компонентов Container я хочу сделать this.props.history.push ('/ login'), он влияет только на ближайший и, таким образом, ничего не рендерит в области контейнера (так как ни один из маршрутов не соответствует)но держать навигационную панель видимойКак я могу получить родительский из Main.js, чтобы решить, что делать при программном изменении маршрута?Должен ли я структурировать приложение другим способом?

Спасибо.

Answer 1

Хитрость заключалась в том, чтобы удалить лишний в App.js и экспортировать его с помощью withRouter (App) в конце файла.Спасибо Ненад Вракар

Answer 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, который будет отображать маршруты исключительно.