React:使用React传递参数-路由器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

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

位置

接口位置{路径名:字符串；搜索:字符串；散列:字符串；状态:未知；键:字符串；}

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

对于给定的路由<Route path="report/:runId/:specFileName" element={<SpecFile />} />，SpecFile组件应该使用useParams挂钩来访问路由路径params、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]);
  
  ...
}

Answer 2

有一个钩子在反应-路由器-6为这.

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

然后用它就像：

const [searchParams] = useSearchParams();