react二级路由配置

在 React 中配置二级路由可以使用 React Router。下面是一个简单的示例：

首先，确保已经安装了 `react-router-dom` 包，可以使用以下命令进行安装：

npm install react-router-dom

接下来，假设你有一个名为 `App` 的主组件，它是你的根组件。在 `App.js` 文件中，你可以进行以下配置：

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

import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

在这个例子中，我们使用了 `BrowserRouter` 组件作为根组件，它是 React Router 提供的一个用于处理路由的组件。然后，使用 `Switch` 组件包裹了多个 `Route` 组件，这样只有匹配到的第一个路由会被渲染。

在这里，我们配置了两个路由：`/` 和 `/about`。如果当前的 URL 与 `/` 完全匹配，那么会渲染 `Home` 组件；如果当前的 URL 与 `/about` 匹配，那么会渲染 `About` 组件。如果当前的 URL 与任何已定义的路由都不匹配，那么会渲染 `NotFound` 组件。

你可以根据自己的需求添加更多的路由配置，例如更多的二级路由或子组件。希望这个例子对你有所帮助！