这个子程序有什么问题？答案

【问题标题】：What's wrong with this SubRouting?这个子程序有什么问题？
【发布时间】：2021-07-25 19:02:39
【问题描述】：

我正在学习“react router dome”，这是我使用它的博客项目。

主路由页面 - app.js

          <Route exact path="/" component={LandingPage} />
          <Route exact path="/post/personal" component={PersonalPage} />
          <Route exact path="/post/something" component={SomethingPage} />
          <Route exact path="/post/javascript" component={JavascriptPage} />
          <Route exact path="/post/react" component={ReactPage} />
 <Route
            render={() => (
              <div
                style={{
                  padding: "20px",
                  width: "280px",
                  margin: "0 auto",
                  fontWeight: "bold",
                }}
              >
                Worng Page found
              </div>
            )}
          />

/post/personal - 个人页面

   <Link className="more" to={`/post/personal/${value._id}`}>
          Click&gt;
        </Link>
      
        <Route
          exact
          path={`/post/personal/:postId`}
          component={PersonalDetailPage}
        />

我的想法是，如果我按下 Click Link 按钮，我会进入 Route [PersonalDetailPage]。但我的代码不工作，并且个人详细信息页面没有显示

屏幕只显示“找到错误的页面”。

但是如果你这样写代码，它工作得很好。

app.js

<Route exact path ="/post/personal/:postId

我想使用 subRouting 而不使用主页 app.js 上的 up 路由。我能怎么做？请帮助我上帝的程序员朋友！！！

【问题讨论】：

标签： routes react-router-dom router

【解决方案1】：

您的路由问题在于您在所有顶级路由上定义了确切的属性。现在，当您这样做时，嵌套路由无法呈现，因为父路由与整个路径不匹配。

例如，如果您访问 /post/personal/5，则路径 /post/personal 渲染 PersonalPage 组件与它完全不匹配，并且由于 PersonalPage 不会重新渲染，因此它的任何子路由都不会匹配

对此的解决方案是使用Switch 组件而不是使用确切的属性，并按顺序定义您的路由，以便前缀路径接近结尾

 <Switch>
      <Route  path="/post/personal" component={PersonalPage} />
      <Route  path="/post/something" component={SomethingPage} />
      <Route  path="/post/javascript" component={JavascriptPage} />
      <Route  path="/post/react" component={ReactPage} />
      <Route
        render={() => (
          <div
            style={{
              padding: "20px",
              width: "280px",
              margin: "0 auto",
              fontWeight: "bold",
            }}
          >
            Worng Page found
          </div>
        )}
      />
     <Route  path="/" component={LandingPage} />
 </Switch>

P.S. Switch 组件在其子组件中呈现第一个匹配的路由

【讨论】：

很简单。感谢您的友好解释。