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

tjjdgumg 于 2023-01-07 发布在 Java

关注(0)|答案(2)|浏览(126)

我怎样才能得到当前的“page”，也就是Route下面的":name"，并把它作为一个prop传递给<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>
    )
  }
}

JavaScript

来源：https://stackoverflow.com/questions/75031666/how-to-get-current-page-and-pass-as-param-in-react-router-v6

2条答案

按热度按时间

np8igboo1#

来自React工艺路线文件：

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钩子，它返回一个类似{ id: "1234", name: "John Doe" }的对象。

赞(0）回复(0）举报 2023-01-07

qhhrdooz2#

我不知道如何将其作为一个属性传递，但我可以帮助您从目的地路线中的url获取值，即'/food/：name'
useLocation是react router v6中的钩子，它可以帮助你获得当前的url，一旦你得到了它，你就可以使用split函数将它拆分，并从url中提取你需要的信息。
代码如下所示：
首先是import语句

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

然后main函数中的代码

const location = useLocation()

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

在split函数中，传入“：name”相对于url的索引值
PS：这是我在这里的第一个答案，希望能有所帮助！

赞(0）回复(0）举报 2023-01-07

我来回答

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

2条答案

相关问题

热门标签

最新问答