reactjs React:如何访问url的参数

yruzcnhs  于 2023-02-22  发布在  React
关注(0)|答案(2)|浏览(152)

我怎样才能从一个路由得到url参数?我得到了这个代码:

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>

          <Route path="/table/:name/" element={<SortingTable/>}></Route>
          <Route path="" exact element={<BasicTable/>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

我想从URL中获取name并在SortingTable中使用它:

const SortingTable = ({match}) => {

    let [searchParams, setSearchParams] = useSearchParams();

    const [data, setData] = useState([])
    const [columns, setColumns] = useState([])
    const table = match.params.name //=> undefined
ddrv8njm

ddrv8njm1#

使用React路由器中的useParams

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}
aelbi1ox

aelbi1ox2#

您可以使用**useParams**:

const { name } = useParams();

注意:如果要从URL获取查询,可以使用useSearchParams,但是如果要获取在Route组件和path属性中定义的参数,可以使用**useParams**

相关问题