javascript - 如何登录App页面并将页面引导至首页？

Question

更新

伙计们，你们帮我解决了部分问题。

现在的新问题是，当我在应用程序中登录时，它对我来说是错误的，如下所示:

它必须以正确的方式出现，如下所示:

我在代码中进行了展望，我认为这可能是 App.js 中以下代码片段中的一些问题:

return (
      <BrowserRouter>
          <Fragment>
            <LoadingBar style={{ zIndex: 1000 }} />
            <Menu />
            <div className='ui main text container' style={{ marginTop: '7em' }}>
              <Switch>
                <Route
                  path='/'
                  exact
                  render={() => {
                    return (
                      <QuestionList
                        handleTabChange={this.handleTabChange}
                        activeIndex={this.state.activeIndex}
                       />
                    )
                  }}
                 />

但我还没弄清楚这可能是什么问题。我尝试在 stackoverflow 中搜索一些内容，但没有成功。

我已经在codesandbox中进行了修改，现在对我来说也是同样的方式。请检查那里，我将不胜感激任何帮助:

https://codesandbox.io/s/compassionate-sammet-iincf

再次非常感谢。

Answer 1

在 App.js 中，您为用户登录时定义了以下路由:

          <Route
            path="/"
            exact
            render={...}
          />
          <Route
            path="/add"
            render={...}
          />
          <Route path="/questions/:question_id" component={QuestionView} />
          <Route path="/leaderboard" component={Leaderboard} />
          <Route path="/logout" component={Logout} />
          <Route path="/404" component={PageNotFound} />
          <Route path="/" component={PageNotFound} />`

请注意，没有为用户登录时定义“/login”路由。这就是您收到 PageNotFound 错误的原因。此外，您已经定义了两次“/”路由，因此您需要删除第二个定义。