使用Switch和BrowserRouter在React中重定向为默认情况

Question

这是我当前在App.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（可能取决于react-router-dom版本）。

根据您的情况，最好将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>