Как использоватьero-router для навигации по компоненту с несколькими страницами

Question

Предположим, у меня есть 2 страницы и несколько компонентов. Первая страница - это страница входа в систему, а другая страница - главное меню. Страница входа имеет только 1 компонент. После того, как пользователь зашел на сайт, я хочу, чтобы реагирующий маршрутизатор перешел в главное меню, в главном меню есть панель навигации и некоторые компоненты внизу. Я хочу, чтобы он имел возможность переходить к каждому компоненту и держать панель навигации наверху все время, даже если URL был изменен.

Вот код, который я пробовал

// Inside the root component
<BrowserRouter>
     <Route path="/menu" component={MenuForm}/>
     <Route path="/login" component={LoginForm}/>
</BrowserRouter>

//Inside the menu page component  
<Navbar/>
<Route path="/shop" component={Shop}/>
<Route path="/categories" component={Categories}/>

С этим кодом я могу перейти только на страницу меню и страницу входа, но я не могу перейти к магазину и категориям, которые являются дочерним компонентом главного меню

Answer 1

Полагаю, вам следует подумать о создании компонентов контейнера. Где первый контейнер будет содержать ваши маршруты входа, а именно «Auth Container», а другие компоненты должны быть в маршрутах приложения, а именно «App Container». И вы можете иметь свою собственную обертку.

const AppRoutes = () => {
    return (
        <>
            <Navigation scrolling={scrolling} />
            <Switch>
                <ProtectedRoute exact path="/profile" component={UserProfile} />
                <ProtectedRoute exact path="/my-orders" component={MyOrders} />
                <ProtectedRoute path="/my-saved-result" component={SavedResults} />
            </Switch>
        </>
    )
}

Answer 2

Если вы используете react-router v4, вы можете Switch компонент для декларативного определения ваших маршрутов, как показано ниже:

import { Switch, Route, Redirect } from 'react-router-dom';

const MenuForm = () => (
  <div className="app-routes">
    <NavBar />
    <Switch>
    <Route exact path="/menu">
      <Redirect to="/menu/shop" />
      </Route>
      <Route path="/menu/shop" component={Shop} />
      <Route path="/menu/categories" component={Categories} />
    </Switch>
  </div>
);

Answer 3

Вам нужна домашняя страница

<Route path="/home" component={Home}/> // all your menu and everything here

теперь, если из дома вы хотите перейти в меню Вы можете сделать это

<Route path="/home/menu" component={Menu}/>

Этот компонент будет отображаться на домашней странице, где вы устанавливаете вложенные маршруты, поэтому соответствующий компонент маршрута будет отображаться

<Route path="/home/menu" component={menu}/>
<Route path="/home/profile" component={Profile}/>

Answer 4

Я использую вот так

    <div className="main-panel">
        <Navbar />
        <div className="content" style={{ backgroundColor: '#f4f3ef' }}>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/reports" component={ReportMain} />
                <Route path="/showWebService" component={ShowWebService} />
            </Switch>
        </div>         
    </div>

Панель навигации статична, когда вы перемещаетесь по ссылке, получая только эти компоненты рендеринга.

<Link to="/reports">
  <p>Reports</p>
</Link>

Вызов компонента со ссылкой