如何获取当前“页面”并在 React Router v6 中作为参数传递

Question

如何获取当前“页面”，即Route下方的":name" ，并将其作为道具传递给<Food>组件？ 例如，如果我在"/food/egg", I should be passing “egg”传递给组件。 我找不到这么多版本的答案。

import React, { Component } from 'react';
import "./App.css";
import Food from './Food';
import { Routes, Route} from 'react-router-dom';

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <Routes>
          <Route path="/food/:name" element={<Food name= 
 {something here?} />} />
        </Routes>
      </div>
    )
  }
}

Answer 1

从反应路由器文档：

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();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

所以你只需要使用useParams钩子，它返回一个 object 像{ id: "1234", name: "John Doe" } 。

Answer 2

我不确定如何将其作为道具传递。 但我可以帮助您从目标路线中的 url 获取值，即'/food/:name'

UseLocation 是一个钩子，可以帮助您在 React Router v6 中实现这一点。 它将为您提供当前所在的 url。 一旦你得到它，你可以使用拆分 function 拆分它并从 url 中提取你需要的信息。

代码将 go 是这样的：

首先是导入语句

import { useLocation } from 'react-router-dom'

然后主里面的代码 function

const location = useLocation()

const name = location.pathname.split('/')[2]

在拆分 function 中，传入 ':name' 相对于 url 的索引值

PS：这是我在这里的第一个答案。 希望能帮助到你！