React：使用 React-Router v6 传递参数

Question

App.js 声明了我的所有路由：

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/">
          <Route index element={<Homepage />} />
          <Route path="settings" element={<Settings />} />
          <Route path="report/:runId" element={<TestReport />} />
          <Route path="report/:runId/:specFileName" element={<SpecFile />} />
        </Route>
      </Routes>
    </div>
  )
}

在这里，我有指向（在我目前的情况下）/report/2/Login 的链接，我想在其中传递一些参数：

   <TableCell>
      <Link
         to={`/report/${this.props.runId}/${specFile.name}`}
         state={{ testcases: this.props.testcases }}
      >
         {specFile.name}
      </Link>
   </TableCell>

在这里我想访问我的参数：

import { useLocation } from "react-router-dom";

export default function SpecFile() {
   const location = useLocation();
   const { from } = location.specFile.name;
   console.log(from); // Should print "Login" instead gives Error Message: Cannot read properties of undefined (reading 'name')
}

Answer 1

react-router-6 中有一个钩子。

import { useSearchParams } from 'react-router-dom';

然后像这样使用它：

const [searchParams] = useSearchParams();

Answer 2

location.specFile.name; 无效并中断，因为location对象没有任何specFile属性。

地点

interface Location { pathname: string; search: string; hash: string; state: unknown; key: string; }

在location.state上访问通过的路由状态，特别是在location.state?.testcases上。

对于给定的路由<Route path="report/:runId/:specFileName" element={<SpecFile />} /> ， SpecFile组件应该使用useParams挂钩来访问路由路径参数runId和specFileName 。

例子：

import { useLocation, useParams } from "react-router-dom";

export default function SpecFile() {
  const { id, specFileName } = useParams();

  const { state } = useLocation();
  const { testcases } = state || {};

  useEffect(() => {
    console.log({ id, specFileName, testcases });
  }, [id, specFileName, testcases]);
  
  ...
}