如何将React-Router-Dom V5代码升级至V6？代码改写问题求助

嘿，我来帮你搞定这个升级问题！先给你理清楚React Router v6和v5的核心差异，这也是你之前代码失效的原因：

• v6里彻底抛弃了<Switch>，改用<Routes>作为路由的容器组件；
• <Route>不再通过子元素定义要渲染的内容，而是通过element属性传递React元素；
• exact属性已经被移除——v6的路由匹配默认采用最长路径优先规则，比如"/home"不会匹配"/home/detail"这类子路径，完全不需要手动设置精确匹配。

你之前尝试的代码里，用了逗号表达式((<Home />), (<Header />))，这是JavaScript的语法特性：它会依次执行每个表达式，最后只返回最后一个表达式的结果。所以你的element实际上只渲染了<Header />，而且这种写法也不符合React元素的传递要求。

正确的升级代码 #

把你的v5代码：

<Switch>
  ...
  <Route path="/home">
    <Header />
    <Home />
  </Route>
</Switch>

替换成v6的写法：

<Routes>
  ...
  <Route path="/home" element={
    {/* 用React.Fragment包裹多个组件，也可以用<div>这类容器替代 */}
    <>
      <Header />
      <Home />
    </>
  } />
</Routes>

这样访问"/home"路径时，就能同时渲染<Header>和<Home>组件了。如果你的<Header>是全局导航栏，其实更推荐把它放在<Routes>外面，这样所有路由页面都会显示Header，具体看你的业务需求调整~

内容的提问来源于stack exchange，提问作者Mücahit Yıldırım