这个 SubRouting 有什么问题？

Question

我正在学习 '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}
        />

我的想法是，如果我按下单击 Link 按钮，我会进入路线 [PersonalDetailPage]。但是我的代码不工作，PErsonalDetailPage 没有显示

屏幕只显示'wrong page found'。

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

app.js

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

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

Answer 1

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

例如，如果您访问 /post/personal/5，路径 /post/personal 呈现 PersonalPage 组件与其完全不匹配，并且由于 PersonalPage 不重新呈现，none 的子路径被匹配

这个问题的解决方案是使用 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 组件在其子组件中呈现第一个匹配的路由

这个 SubRouting 有什么问题？

What's wrong with this SubRouting?

router

routes

react-router-dom