问找不到页面显示在所有我的页面上- React Router
EN

Stack Overflow用户

提问于 2021-01-28 04:39:23

回答 1查看 63关注 0票数 1

我有我所有的路由，作为一个好的实践，我也有我的NotFound页面，我在我的MainLayout中添加了这个，其中包含一个导航栏和一个页脚。但我有一个问题，我的NotFound页面与其他路由的页面一起显示。

const Root = () => 
  <BrowserRouter>
  <Switch>
     <ProtectedRoute exact path="/:username/contact-networks" component={ContactNetworks} /> 
     <ProtectedRoute exact path="/:username/tags" component={UserTags} />
     <ProtectedRoute exact path="/:username/profile-picture" component={UserProfilePicture} />
     <MainLayout nofooter={['/login']}>
        <Route exact path="/" component={Home} />
        {!isAuthenticated ? (
           <Fragment>
              <Route exact path="/logup" component={Logup} /> 
              <Route exact path="/login" component={Login} />
           </Fragment>) : <Redirect to="/" />}
        <Route exact path="/users/:username" component={UserProfile} />
        <Route exact path="/:username/catalog/:product" component={ProductPage} />
        <ProtectedRoute exact path="/:username/products/new" component={PostProduct} />
        <Route exact path="/:username/opinions" component={ClientsOpinions} /> 
        <ProtectedRoute exact path="/:username/opinions/new" component={NewOpinion} /> 
        <Route exact path="/:shop/contact" component={ShopContact} />
        <Route exact path="/search/results" component={SearchResults} />
        <Route component={NotFound} />
     </MainLayout>
  </Switch>
  </BrowserRouter >

这种情况会发生：

react-router

reactjs

回答 1

Stack Overflow用户

发布于 2021-01-28 04:42:43

所有Route组件都需要是Switch的直接子组件才能正常工作。每个the docs

<Switch>的独特之处在于它以独占方式呈现路由。相比之下，与位置匹配的每个<Route>都包含呈现。

这里发生的情况是，MainLayout中断了Switch和Route组件之间的父/子关系。因此，Route采用其默认行为，即呈现与路径匹配的所有Route，而不仅仅是第一个。

此外，您应该将isAuthenticated分支内部的Fragment替换为Switch。

const Root = () => 
<BrowserRouter>
  <Switch>
    <ProtectedRoute exact path="/:username/contact-networks" component={ContactNetworks} /> 
    <ProtectedRoute exact path="/:username/tags" component={UserTags} />
    <ProtectedRoute exact path="/:username/profile-picture" component={UserProfilePicture} />
    <MainLayout nofooter={['/login']}>
      <Switch>
        <Route exact path="/" component={Home} />
        {!isAuthenticated ? (
            <Switch>
              <Route exact path="/logup" component={Logup} /> 
              <Route exact path="/login" component={Login} />
            </Switch>) : <Redirect to="/" />}
        <Route exact path="/users/:username" component={UserProfile} />
        <Route exact path="/:username/catalog/:product" component={ProductPage} />
        <ProtectedRoute exact path="/:username/products/new" component={PostProduct} />
        <Route exact path="/:username/opinions" component={ClientsOpinions} /> 
        <ProtectedRoute exact path="/:username/opinions/new" component={NewOpinion} /> 
        <Route exact path="/:shop/contact" component={ShopContact} />
        <Route exact path="/search/results" component={SearchResults} />
        <Route component={NotFound} />
      </Switch>
    </MainLayout>
  </Switch>
</BrowserRouter >

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65927044

复制

相似问题

问找不到页面显示在所有我的页面上- React Router
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问找不到页面显示在所有我的页面上- React RouterEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问找不到页面显示在所有我的页面上- React Router
EN