Question

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

例如：

    foreach(int i in listBox1.SelectedIndices)
    {
        MessageBox.Show(listBox1.Items[i].ToString());
    }

“包罗万象”路线在<Router> <Switch> <Route path="/login" component={Login} /> <Route path="/" component={Main} /> ** a catch all route wouldn't work here ** </Switch> </Router>之类的系统上无法正常工作，因为路径将在<Route component={NotFound} />的任何地方触发。如果我切换到path='/'，则无法从用户登录时需要的URL访问exact path='/'。

localhost:3000/users：

Main

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

使用单独的页面来应对Catch-All

1 个答案: