如何在 react-router-dom v6 中的路由组件中添加道具答案

【问题标题】：how to add props in route component in react-router-dom v6如何在 react-router-dom v6 中的路由组件中添加道具
【发布时间】：2021-11-14 11:25:55
【问题描述】：

作为标题状态，我曾经有一个带有状态组件的页面，该组件根据对 url 所做的更改获取不同的道具。

现在，升级到 react router v6，我真的不明白如何让它再次工作。我知道现在解决这个问题的唯一方法是使用诸如 useNavigate 之类的钩子，但我不知道如何在我的代码中实现这一点。我已经阅读了 react-router v6 文档，但仍然不明白如何解决我的问题。

Se 下面的代码。代码从子组件开始排序，直到 index.tsx。组件是广泛的，基本上是一个从 props 获取状态的 statfulcomponent。并根据给定的道具将相应地显示其内容。

请有人为我的设置建议一个解决方案吗？

CalculatorPage.tsx


import Calculator from "../components/Calculator";
import { Route, Routes } from "react-router";
import { Link } from "react-router-dom";

import { FlowrateCalc } from "../calc/calculators/FlowrateCalc";
import { ValveKvsCalc } from "../calc/calculators/ValveKvsCalc";
import { AccelerationCalc } from "../calc/calculators/AccelerationCalc";

export default function CalculatorPage() {
  return (
    <div>
      {/* when changing links, there is no props being sent to Calculator. Calculator is a STATEFUL component*/}
      <Routes>
        <Route
          path={"flow"}
          element={<Calculator {...FlowrateCalc} />}
        />
        <Route
          path={"kvs"}
          element={<Calculator {...ValveKvsCalc} />}
        />
        <Route
          path={"acceleration"}
          element={<Calculator {...AccelerationCalc} />}
        />
      </Routes>
      
      <Link to={"flow"}>
        <button style={{ color: "green" }}>flow</button>
      </Link>
      <Link to={"kvs"}>
        <button style={{ color: "red" }}>kvs</button>
      </Link>
      <Link to={"acceleration"}>
        <button style={{ color: "blue" }}>acceleration</button>
      </Link>
    </div>
  );
}

Main.tsx

import { Route , Routes} from "react-router-dom";
import HomePage from "../pages/HomePage";
import CalculatorPage from "../pages/CalculatorPage";
import AboutPage from "../pages/AboutPage";


export default function Main() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<HomePage/>} />
        <Route path="/calculator/*" element={<CalculatorPage/>} />
        <Route path="/about" element={<AboutPage/>} />
      </Routes>

    </div>
  );
}

App.tsx

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

import Header from "./layout/Header";
import Footer from "./layout/Footer";
import Main from "./layout/Main";

export default function App() {
  return (
    <div>
      <BrowserRouter>
        <Header />
        <Main />
        <Footer />
      </BrowserRouter>
    </div>
  );
}

Index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import { store } from './state';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

【问题讨论】：

您的问题中是否包含所有相关代码？您具体指的是哪些道具需要传递给路由组件？你指的是旧的RRDv5route props吗？你在哪里使用navigate（来自useNavigate 钩子）？这个问题需要更多的上下文。你能分享一下这个Calculator 组件，它在 RRDv5 时代是如何使用的，现在在 v6 中是如何使用的？

标签： reactjs react-router react-router-dom

【解决方案1】：

除非有人有其他答案，否则似乎没有这样的解决方案。从反应路由器 v6 开始，没有通过路由器传递道具。相反，我们必须使用功能组件和响应路由器挂钩来检测 url 更改。

【讨论】：

【解决方案2】：

您可以使用 react-router-dom 提供的钩子从 URL 中提取参数数据。

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

const params = useParams(); // inside your component

这允许您从 URL 中提取数据

This official docs link might help you as well

【讨论】：

【解决方案3】：

您可以创建一个商店，如果需要，useSelector 钩子会在那个时候为您提供有用的帮助。

使用useSelector，您可以轻松获取商店的状态。

用途：

import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector((state) => state.counter)
  return <div>{counter}</div>
}

【讨论】：

是的，我继续在我的项目中使用了 redux。感谢您的建议！