使用BrowserRouter在React JS中使用字符串列表作为路径创建动态路由

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const items = ['item1', 'item2', 'item3'];

function Item({ match }) {
  return <div>Item: {match.params.itemId}</div>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          {items.map((item, index) => (
            <li key={index}>
              <Link to={`/item/${item}`}>{item}</Link>
            </li>
          ))}
        </ul>
      </nav>
      <Switch>
        {items.map((item, index) => (
          <Route key={index} path={`/item/${item}`} component={Item} />
        ))}
      </Switch>
    </Router>
  );
}

export default App;

import { useEffect } from 'react';
import { useParams } from 'react-router-dom';

function Item() {
  const { itemId } = useParams();

  useEffect(() => {
    // 这里可以放置因为路由变化需要执行的代码
    console.log('Item ID changed:', itemId);
  }, [itemId]);

  return <div>Item: {itemId}</div>;
}