Как правильно структурировать маршруты в response.js, используя вложенные маршруты вместе с частным компонентом маршрута? - PullRequest
Новая
       42

Как правильно структурировать маршруты в response.js, используя вложенные маршруты вместе с частным компонентом маршрута?

0 голосов
/ 03 января 2019

Я использую React-Router-DOM. В настоящее время у меня есть файл app.js с рутированием что-то вроде этого: 

<BrowserRouter>
    <div className="App container">

        <Header/>

        <Switch>
            <Route exact path='/' component={Dashboard}/>
            <Route path='/profile' component={Profile}/>
        </Switch>

    </div>
 </BrowserRouter>

Итак, у меня есть компонент заголовка, который всегда находится на странице, и маршрутизация для двух компонентов, панели мониторинга и профиля. Теперь я хочу добавить новую страницу «Логин», которая будет иметь только компонент входа (без компонента заголовка). Примерно так: 

<BrowserRouter>
    <div className="App container">

        <Switch>
            <Route path='/login' component={Login}/>

            <Route path='/'>

                <Header/>

                 <Switch>
                     <Route exact path='/' component={Dashboard}/>
                     <Route path='/profile' component={Profile}/>
                 </Switch>

            </Route>
        </Switch>
    </div>
 </BrowserRouter>

И последний шаг - заменить компонент маршрута частным компонентом маршрута.

1 Ответ

0 голосов
/ 03 января 2019

Что вы подразумеваете под частным маршрутом? Для страницы входа без заголовка используйте React фрагменты 

<Switch>
    <Route path='/login' component={LoginComponent} /> {/* <--- No header */}
    <Fragment>
        <Header/>
        <Route exact path='/' component={Dashboard}/>
        <Route path='/profile' component={Profile}/>
    </Fragment>
</Switch>
...