我的项目中路由无法正常工作的原因是什么？

Question

当我在地址之后键入“/创建”时，我希望它显示home组件。由于我不使用精确 prop。因为path ='/c'与“/create”匹配，但它显示create component。它首先工作正常，当我从精确 prop中使用时，它可以按预期工作正常。我不知道为什么从第一个route中删除Exact后，它不按预期工作。

仅当我做：＆lt; outa path =“/” element = {＆lt; home/＆gt;}/＆gt;

注意：我将其用于运行服务器： npx json-server -watch数据/db.json -port 8000

请参阅codeSandBox上： https://codesandbox.io/s/epic-feather-uz2iur

这是我的路线部分：

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Routes>
            <Route path="/c" element={<Home />} />
            <Route path="/create" element={<Create />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

它在我的webstorm上给出了相同的结果（react-router-dom版本5 ）：

  <Router>
      <div className="App">
          <Navbar />
          <div className="content">
              <Switch>
                  <Route path="/">
                      <Home />
                  </Route>
                  <Route path="/create">
                      <Create />
                  </Route>
              </Switch>
          </div>
      </div>
  </Router>

Answer 1

似乎问题是对路由路径匹配如何从react-router@5转换为react> react-router@6的误解。

在RRDV5中，路线路径更像是“路径前缀”，这意味着它的行为就像您描述的那样。 path =“/c”可以匹配 url路径以“/c”/c“”开始。当尝试具体或完全匹配某些路线时，这具有其特殊性。这就是为什么幼稚的开发人员会用eact prop prop pepper prop（） ）。

例如，您的V5版本，它需要使用Exact prop才能匹配“/c” 并渲染home component ，或者完全不匹配，因此可以匹配创建组件。

<Router>
  <div className="App">
    <Navbar />
    <div className="content">
      <Switch>
        <Route exact path="/c" component={Home} />
        <Route exact path="/create" component={Create} />
      </Switch>
    </div>
  </div>
</Router>

这是因为（a）路由匹配在V5中的工作方式，以及（b）switch组件渲染 唯一的方式路由或重定向组件。路线路径顺序和特异性很重要！在几乎100％的用例中，您不需要精确的支架，只需正确订购路线，从 最具体的 到 最不具体的 。

相同的V5路由和切换，但正确订购：

<Router>
  <div className="App">
    <Navbar />
    <div className="content">
      <Switch>
        <Route path="/create" component={Create} />
        <Route path="/c" component={Home} />
      </Switch>
    </div>
  </div>
</Router>

请注意，“/c”无法匹配path =“/create”，并且匹配一直延续到找到它和匹配路径=“/c”。

现在，在rrdv6中， 始终 完全匹配，因此exack ecker prop不再存在，因为它不需要。每条路由都使用路径排名系统，请参见等级路线。路径的特异性产生等级值，这用于匹配路由。路线订单现在无关紧要。

<Routes>
  {/* match & render when path is exactly "/c" */}
  <Route path="/c" element={<Home />} />

  {/* match & render when path is exactly "/create" */}
  <Route path="/create" element={<Create />} />
</Routes>

Answer 2

使用React-Router-dom版本5您可以将switch与*一起使用，并且应该

<Router>
  <div className="App">
    <Navbar />
    <div className="content"></div>
    <Switch>
      <Route path="/c*">
        <Home />
      </Route>
      <Route path="/create">
        <Create />
      </Route>
    </Switch>
  </div>
</Router>

根据文档

工作

a switch浏览其所有子女元素和渲染
第一个路径与当前URL匹配的第一个。使用任何一个
您有多个路线的时间，但是您只希望其中之一渲染
一次

工作示例

Answer 3

关于“精确” prop的V6发生了破坏的变化 - 它不再存在，默认情况下所有路径均为精确。

您可以在此处阅读更多信息：升级到v6

路线精确消失了。而是带有后代路线的路由（定义
在其他组件中）在他们的路径中使用尾随 *表示他们
匹配深度