reactjs - 是否可以将参数从 React Route 标签传递到 Navigate 标签？

Question

内容如下。

<Route path="/:id" >
    <Navigate
      to="/intro?Id=:id"
    />
  </Route>

有没有办法将 :id 参数传递给 Route 标签，就像将 :id 参数传递给 Navigate 标签一样？

Answer 1

好的，我明白了，所以您实际上想要渲染从“/:id”到“intro?Id=:id”的重定向。

您不能只从一个路径重定向到另一个路径，因为您动态使用 id 路由匹配参数作为查询字符串参数的一部分，并且由于 react-router-dom 不处理您自己处理此映射所需的 URL 查询字符串。我花了一些时间仔细研究版本 6 文档，但这就是我得出的结论:

1. 创建自定义组件来读取匹配参数并呈现 Navigate 组件。

   const IntroRedirect = () => {
     const { id } = useParams();
     return <Navigate replace to={`/intro?Id=${id}`} /> 
   };
   

2. 在 Route 上渲染 MyNavigate。

   <Route path="/:id" element={<IntroRedirect />} />
   

完整演示代码:

import {
  BrowserRouter as Router,
  Link,
  Routes,
  Route,
  Navigate,
  useLocation,
  useParams
} from "react-router-dom";

const IntroRedirect = () => {
  const { id } = useParams();
  return <Navigate replace to={`/intro?Id=${id}`} />;
};

const Intro = () => {
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  const Id = query.get("Id");

  return <div>Intro: Id="{Id}"</div>;
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Router>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/1234">"/1234"</Link>
          </li>
          <li>
            <Link to="/4567">"/4567"</Link>
          </li>
          <li>
            <Link to="/7890">"/7890"</Link>
          </li>
        </ul>
        <Routes>
          <Route path="/intro" element={<Intro />} />
          <Route path="/:id" element={<IntroRedirect />} />
        </Routes>
      </Router>
    </div>
  );
}