javascript - 具有不同页面布局的嵌套 react 路由

Question

我的代码有两个问题:

第一: 我的整个应用程序似乎工作正常，当我第一次加载我的网络应用程序时，我可以访问我的所有路线。我的应用程序由一个登陆页面及其导航栏组成，该导航栏有一个登录按钮，可将我直接带到我的应用程序的主页(尚未添加身份验证)。该主页的导航栏与登陆页面上的导航栏不同。导航栏项目是(主页、关于和登陆页面)。我的 App.js 具有到登录页面组件、主页(Gitapp 组件)和 PageNotFound 组件的路由。 Gitapp 组件包含到“关于”页面和其他组件的路由。如果我碰巧在 App.js 上的一条路线(第一级路线)上重新加载页面，它会重新加载正常。但是，如果我位于 Gitapp 组件上存在的路由(二级路由)(例如“关于”页面的路由)上，并且重新加载页面，我会得到 PageNotFound 组件。

第二点: 我的第二个导航栏有一个注销按钮，可以带我返回登录页面。由于某种原因，我无法让它工作，因为如果我在 Gitapp 组件中添加到登录页面的路由，React 将尝试在主页下方显示登录页面。

这是 App.js:

const App = () => {
  return (
    <Fragment>
      <Router>
        <Switch>
          <Route exact path='/' component={LandingPage} />
          <Route exact path='/gitapp' component={GitApp} />
          <Route component={PageNotFound} />
        </Switch>
      </Router>
    </Fragment>
  );
};

这是 LandingPage.js:

const LandingPage = () => {
  return (
    <div>
      <NavbarLanding />
      <SideNavBar />
      <LandingSection1 />
      <LandingSection2 />
      <LandingSection3 />

      <Route exact path='/gitapp' component={GitApp} />
    </div>
  );
};

这是 Gitapp.js:

const GitApp = ({ match }) => {
  return (
    <GithubState>
      <Router>
        <div style={containerStyling}>
          <Navbar />
          <Switch>
            <Route exact path={match.url} component={Home} />
            <Route
              exact
              path={`${match.url}/user/:login`}
              component={UserProfile}
            />
            <Route exact path={`${match.url}/about`} component={About} />
          </Switch>
          <Footer />
        </div>
      </Router>
    </GithubState>
  );
};

const containerStyling = {
  minHeight: '100vh',
  overflow: 'hidden',
  display: 'block',
  position: 'relative',
  paddingBottom: '70px'
};

Answer 1

我已经解决了这两个问题!我必须去掉 App.js 中定义的 Gitapp 路由中的精确一词。 所以代替:

const App = () => {
  return (
    <Fragment>
      <Router>
        <Switch>
          <Route exact path='/' component={LandingPage} />
          <Route exact path='/gitapp' component={GitApp} /> {/* Wrong! */}
          <Route component={PageNotFound} />
        </Switch>
      </Router>
    </Fragment>
  );
};

应该是:

const App = () => {
  return (
    <Fragment>
      <Router>
        <Switch>
          <Route exact path='/' component={LandingPage} />
          <Route path='/gitapp' component={GitApp} /> {/* Correct! */}
          <Route component={PageNotFound} />
        </Switch>
      </Router>
    </Fragment>
  );
};

不知 Prop 体原因，但我可以重新加载第二级组件，而不是接收 NotFound 组件。如果有人能解释为什么“exact”这个词在这里产生不同的效果，我将不胜感激。

至于我的第二个问题，我只是使用了带有条件渲染的重定向。因此，我的上下文 api 将更新我的全局“注销”状态并将其传递给组件，然后该组件将等待它(“注销”状态)变为 true，然后将我重定向到登陆页面。