Перенаправление для случая по умолчанию в React с использованием Switch и BrowserRouter

Question

Это мое текущее приложение. js файл в реакции. Я пытаюсь достичь каждый раз, когда осуществляется доступ к ссылке первого переключателя, я не хочу, чтобы отображалась панель навигации, но в противном случае панель навигации должна быть видимой. У меня нет случая по умолчанию, поэтому я застрял. Если это может кому-то помочь, если пользователь уже вошел в систему, доступ к входу / выходу напрямую перенаправляет вас на главную, а если он не вошел в систему, доступ к любой другой странице перенаправляет вас на страницу входа. Было бы очень полезно, если бы у вас был обходной путь.

<BrowserRouter>
  <Switch>
    <Route path='/user/register' component={Register} />
    <Route path='/user/login' component={Login} />
    <Route path='/user/logout' component={Logout} />
    <Navbar />
  </Switch>
  <Switch>  
    <Route path='/note/new' component={NewNote} />
    <Route path='/list/new' component={NewList} />
    <Route path='/note/:noteid' component={NoteDetail} />
    <Route path='/list/:listid' component={ListDetail} />
    <Route path='/home' component={Home} />
    <Route path='/archive' component={Archive} />
    <Route path='/note' component={Note} />
    <Route path='/list' component={List} />
    <Route path='/trash' component={Trash} />
  </Switch>
</BrowserRouter>

Спасибо

Answer 1

Switch не является обычным программным оператором «switch», нет случая «по умолчанию». Он просто возвращает первый соответствующий дочерний компонент Route или Redirect. Как написано, если ни один из путей /user/XXX не соответствует , он будет ( должен ) отобразить Navbar (возможно, зависит от response-router-dom version).

В вашем случае может быть лучше визуализировать Navbar на Route, за пределами Switch, и указать, какие пути могут совпадать, т.е. исключить путь /user.

<BrowserRouter>
  <Route
    path={['/home', '/archive', '/note', '/list', '/trash']}
    component={Navbar}
  />
  <Switch>
    <Route path='/user/register' component={Register} />
    <Route path='/user/login' component={Login} />
    <Route path='/user/logout' component={Logout} />
    <Route path='/note/new' component={NewNote} />
    <Route path='/list/new' component={NewList} />
    <Route path='/note/:noteid' component={NoteDetail} />
    <Route path='/list/:listid' component={ListDetail} />
    <Route path='/home' component={Home} />
    <Route path='/archive' component={Archive} />
    <Route path='/note' component={Note} />
    <Route path='/list' component={List} />
    <Route path='/trash' component={Trash} />
  </Switch>
</BrowserRouter>