react动态路由

在React中，可以使用第三方库React Router来实现动态路由。React Router提供了一种简单的方式来管理应用程序的路由和导航。

首先，在React项目中安装React Router：

bash
npm install react-router-dom --save
# 或者
yarn add react-router-dom

然后，在项目中创建一个路由文件（通常命名为AppRouter.js）并配置路由规则。例如：

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Product from './components/Product';

const AppRouter = () => {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/product/:id" component={Product} />
    </Router>
  );
};

export default AppRouter;

在上述代码中，我们通过BrowserRouter组件创建了一个根路由容器，并使用Route组件配置了三个路由规则。其中，exact属性表示路径必须完全匹配，path表示路径，component表示对应的组件。

接下来，在主入口文件（通常为index.js）中引入路由文件并渲染：

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './AppRouter';

ReactDOM.render(
  <React.StrictMode>
    <AppRouter />
  </React.StrictMode>,
  document.getElementById('root')
);

然后，在需要使用动态路由的组件中，可以使用props.match.params来获取路由参数，进行相应的处理。例如，在Product.js组件中：

import React from 'react';

const Product = (props) => {
  const { id } = props.match.params;

  return (
    <div>
      <h1>Product Detail: {id}</h1>
      {/* 其他组件内容 */}
    </div>
  );
};

export default Product;