如何根据道具在组件中创建新的反应路线？

Question

我正在尝试根据组件的道具创建一个新的反应路线。 App.js 将着陆页路由到主页组件。

import "./App.css";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
    return (
        <div>
            <Navbar />
            <Router>
                <Routes>
                    <Route path="/" element={<Home />} />
                </Routes>
            </Router>
        </div>
    );
}

export default App;

我有服务卡文件，我想根据道具创建新路线。例如

route = lorem -> /services/lorem
route = ipsum -> /services/ipsum

服务卡看起来像这样

import React from "react";
import "../css/servicecard.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";

const ServiceCard = ({ text, subClass, image, route }) => {
    return (
        <>
            <div className={`card-container ${subClass}`} data-aos="fade-up">
                <span className="card-title">{text}</span>

                <img src={image} alt="service-icon" />
            </div>
        </>
    );
};

export default ServiceCard;

Answer 1

我认为你在谈论 route params，这里有一个例子：

export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:param" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

在子组件中：

function Child() {

  let { param } = useParams();

  return (
    <div>
      <h3>ID: {param}</h3>
    </div>
  );
}

如何根据道具在组件中创建新的反应路线？

how to create new react routes in a component according to the props?

javascript

reactjs

react-router