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

在React JS中，使用BrowserRouter结合react-router-dom库可以轻松地创建动态路由。动态路由是指路由路径中包含可变部分的路由，这些部分可以在不同的URL中匹配不同的值。这在构建具有多个相似页面的应用程序时非常有用，例如用户个人资料页面或产品详情页面。

基础概念

BrowserRouter: 是react-router-dom提供的一个路由器组件，它使用HTML5 history API（pushState, replaceState 和 popstate 事件）来保持UI和URL的同步。

动态路由: 路由路径中包含参数，这些参数可以在组件内部通过this.props.match.params访问。

类型

动态路由通常是通过在路径中使用冒号(:)后跟参数名来定义的。

应用场景

用户个人资料页面，如 /user/:userId
产品详情页面，如 /products/:productId
博客文章页面，如 /posts/:postId

示例代码

假设我们有一个字符串列表，我们想要为列表中的每个项目创建一个动态路由。

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;

遇到的问题及解决方法

问题: 如果URL中的参数变化了，但组件没有重新渲染怎么办？

原因: React Router v4+ 使用了React的组件生命周期和Hooks来决定是否需要重新渲染组件。如果组件是一个纯函数组件且没有使用useEffect或useState来监听路由变化，它可能不会重新渲染。

解决方法: 使用useEffect Hook来监听路由参数的变化。

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>;
}

通过这种方式，每当路由参数变化时，useEffect中的回调函数都会被执行，从而可以处理路由变化带来的逻辑。