为了账号安全,请及时绑定邮箱和手机立即绑定

具有不同页面布局的嵌套反应路线

具有不同页面布局的嵌套反应路线

红颜莎娜 2021-10-14 16:53:20
我的代码有两个问题:第一:我的整个应用程序似乎运行良好,当我第一次加载我的 Web 应用程序时,我可以访问我的所有路由。我的应用程序包含一个带有导航栏的登陆页面,导航栏有一个登录按钮,可将我直接带到应用程序的主页(尚未添加身份验证)。此主页的导航栏与登录页面上的导航栏不同。导航栏项目是(home、about 和 LandingPage)。我的 App.js 有到登陆页面组件、作为 Gitapp 组件的主页和一个 PageNotFound 组件的路由。Gitapp 组件包含到关于页面和其他组件的路由。如果我在 App.js 上的其中一个路由(第一级路由)上碰巧重新加载页面,它会重新加载正常。但是,如果我在 Gitapp 组件上存在的路由(二级路由)上,第二:我的第二个导航栏有一个退出按钮,可以让我回到登陆页面。由于某种原因,我无法让它工作,因为如果我将路由添加到我的 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'};
查看完整描述

1 回答

?
慕田峪4524236

TA贡献1875条经验 获得超5个赞

我已经解决了这两个问题!我不得不去掉 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>

  );

};

不知道为什么,但我可以重新加载二级组件而不是接收 NotFound 组件。如果有人能解释为什么精确这个词在这里有所不同,我们将不胜感激。


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


查看完整回答
反对 回复 2021-10-14
  • 1 回答
  • 0 关注
  • 133 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信