Question

我正在使用React Router 4.2.0。在我的场景中，我必须在相同的URL中加载不同的组件。

我有两个组件Login和Dashboard

当我运行localhost:3000组件时，应根据localstorage标志加载。

我尝试使用以下代码它显示404页面

 <Route path='*' component={NotFound} />
 <Route path="/" render={(props) => {
    if (localStorage.getItem('user')) { 
       return <Dashboard /> 
    }
    else {
       return <Login />
    }
 }} />

Answer 1

默认情况下，路由以包含方式匹配（尽可能多）。通配符捕获所有内容，如果需要以独占方式在它们之间切换，则需要使用Switch组件。换句话说：

    <div className="App">
      <Switch>
        <Route path="/" component={Login}/>
        <Route path="*" component={NotFound} exact/>
      </Switch>
    </div>

以上内容将匹配根目录上的登录页面，然后回退到404。

反应路由器|同一网址中的不同组件

1 个答案: