用单独的页面反应包罗万象

Question

我看到了很多关于如何在 SPA 中创建找不到页面的路由的解决方案，但似乎无法为也使用单独页面（如登录）的 SPA 找到任何东西。

例如：

<Router>
  <Switch>
    <Route path="/login" component={Login} />
    <Route path="/" component={Main} />
    ** a catch all route wouldn't work here **
  </Switch>
</Router>

catch-all 路径不适用于<Route component={NotFound} /> 之类的东西，因为路径会在来自path='/' 的任何地方触发。如果我切换到exact path='/'，那么我将无法从用户登录时需要的URL 访问localhost:3000/users。

Main:

<Switch>
  <div className="someclass">  
    <Header />
    <Route exact path='users' component={Users} />
    <Footer />
  </div>
  <Route component={NotFound} /> . ** This also doesn't work here **
</Switch>

Answer 1

看看下面的代码来实现你想要的结果：

               <Switch>                  
                {this.props.notLoggedIn === true
                  ? <Route path='/' component={LandingPage}/>                                          
                  : <Dashboard />                    
                }
                <Route component={PageNotFound}/>
              </Switch>    

在上述情况下，我将登录页面显示为默认路由，如果用户登录，则会显示仪表板（包含更多路由）。为了掌握用户是否经过身份验证，我通过登录页面中的提交设置了auth 状态，例如

handleSubmit = (e) => {
    e.preventDefault()

    const { value} = this.state  
    const { dispatch } = this.props

    dispatch(setAuthedUser(value))
  }

在我的应用程序中之后，我可以访问它并设置 notLoggedIn 属性。见

function mapStateToProps ({ authedUser }) {
  return {
    notLoggedIn: authedUser === null
  }
}

如果没有匹配的路由，则显示PageNotFound 组件。

有关完整代码，请查看 repo： Repo