在 React js 底部的每个页面上都找不到页面答案

【问题标题】：getting Not found page on every page at buttom React js在 React js 底部的每个页面上都找不到页面
【发布时间】：2021-12-10 05:30:17
【问题描述】：

我在底部的每一页上都得到not found 页面。我已将navbar 放在login & signup 之后，因此它在登录和注册页面上不可见。我在按钮的每个页面中都找不到页面。我不确定它为什么会出现。

 <Router>
                               
                                <Switch>
                                    <MyRoute
                                        restricted={userid}
                                        exactly
                                        path="/login"
                                        component={LoginSignupPage}
                                    />
                                    <MyNavBar>
                                        <PrivateRoute
                                            exactly
                                            path="/"
                                            component={HomePage}
                                        />
                                      
                                        <MyRoute
                                            restricted={false}
                                            exactly
                                            path="/user/:userId"
                                            component={UserProfilePage}
                                        />
                                        <MyRoute
                                            restricted={false}
                                            component={NotFoundPage}
                                        />
                                    </MyNavBar>
                                </Switch>
                              
                            </Router>

MyRoute.tsx

 <Route {...rest} render={props => (
            restricted ?
                <Redirect to="/" />
                : <Component {...props} />
        )} />

React 路由器 dom 版本 "react-router-dom": "^5.3.0",

【问题讨论】：

你用的是哪个 react-router-dom 版本？
我正在使用“react-router-dom”：“^5.3.0”@ParthNavadiya
react-router-dom 不会导出Router，而是导出BrowserRouter，因此您需要从“react-router-dom”导入{ BrowserRouter as Router }。
我已经完成了。我刚刚在404 page 遇到了每一页都出现的问题。 @ParthNavadiya
是的，我通过用导航栏包裹每个组件来修复。

标签： reactjs react-router react-router-dom

【解决方案1】：

我是这样固定的

 <Router>
                               
                                <Switch>
                                    <MyRoute
                                        restricted={userid}
                                        exactly
                                        path="/login"
                                        component={LoginSignupPage}
                                    />
                                  
                                        <PrivateRoute
                                            exactly
                                            path="/"
                                            component={HomePage}
                                        />
                                      
                                        <MyRoute
                                            restricted={false}
                                            exactly
                                            path="/user/:userId"
                                            component={UserProfilePage}
                                        />
  <MyNavBar>
                                        <MyRoute
                                            restricted={false}
                                            component={NotFoundPage}
                                        />
                                    </MyNavBar>
                                </Switch>
                              
                            </Router>

  <MyNavBar>
<Route {...rest} render={props => (
            restricted ?
                <Redirect to="/" />
                : <Component {...props} />
        )} />
  </MyNavBar>

【讨论】：

【解决方案2】：

问题在于Switch 组件匹配并呈现第一个Route 或Redirect 组件。这些也是Switch 组件的唯一有效子级。但是，您将 MyNavBar 渲染为一个孩子，所以这将总是被渲染。 MyNavBar 的子路由现在不再包装在 Switch 中，而是根据路由器的匹配规则进行匹配和呈现。

提醒一下：

Router 组件包含匹配和渲染路由。换句话说，它们会渲染所有匹配项。
Switch 组件独占只渲染第一个匹配项。

这意味着MyNavBar 中的所有路由都是包含匹配的，并且由于没有为NotFoundPage 指定path 属性，它将始终匹配并被渲染。

<Router>
  <Switch>
    <MyRoute
      restricted={userid}
      exactly
      path="/login"
      component={LoginSignupPage}
    />
    <MyNavBar>
      <PrivateRoute
        exactly
        path="/"
        component={HomePage}
      />
      <MyRoute
        restricted={false}
        exactly
        path="/user/:userId"
        component={UserProfilePage}
      />
      <MyRoute
        restricted={false}
        component={NotFoundPage}
      />
    </MyNavBar>
  </Switch>
</Router>

你应该用另一个Switch 包裹MyNavBar 的嵌套/子路由以返回独占路由匹配。为了更技术上正确，MyNavBar 也应该由Route 组件呈现。 exactly 也不是 Route 组件理解的道具，也许您打算使用 exact 来完全匹配 path。在Switch 组件路径顺序和特异性方面很重要。您应该将路径从更具体到不太具体。如果操作正确，您几乎可以消除曾经需要exact 属性的需要。

<Router>
  <Switch>
    <MyRoute
      restricted={userid}
      path="/login"
      component={LoginSignupPage}
    />
    <Route
      render={() => (
        <MyNavBar>
          <Switch>
            <MyRoute
              restricted={false}
              path="/user/:userId"
              component={UserProfilePage}
            />
            <PrivateRoute
              path="/"
              component={HomePage}
            />
            <MyRoute
              restricted={false}
              component={NotFoundPage}
            />
          </Switch>
        </MyNavBar>
      )}
    />
  </Switch>
</Router>

【讨论】：