在 React 中使用函数式组件和函数路由时，您可以使用 react-router-dom 库来配置路由，并且可以使用 children 配置来嵌套子路由。以下是一个示例，演示如何使用函数式组件和 react-router-dom 来配置路由以及如何使用 children 配置来嵌套子路由。
首先，确保您已安装了 react-router-dom：
npm install react-router-dom
然后，您可以按照以下步骤设置路由：
创建主要的 App 组件，并在其中定义根路由。您可以使用 BrowserRouter 来包装整个应用程序，以便使用路由功能。
// App.js
react router v6 文档
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}
export default App;
在 Home 组件中，您可以添加一个子路由配置，用来渲染子页面。
// Home.js
import React from 'react';
import { Route, Link, useRouteMatch } from 'react-router-dom';
import SubPage1 from './SubPage1';
import SubPage2 from './SubPage2';
function Home() {
  const { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Home</h2>
      <ul>
        <li>
          <Link to={`${url}/subpage1`}>Subpage 1</Link>
        </li>
        <li>
          <Link to={`${url}/subpage2`}>Subpage 2</Link>
        </li>
      </ul>
      <Route path={`${path}/subpage1`} component={SubPage1} />
      <Route path={`${path}/subpage2`} component={SubPage2} />
    </div>
  );
}
export default Home;
在 SubPage1 和 SubPage2 组件中，您可以添加子路由配置或任何其他子页面内容。
这是一个简单的示例，演示如何使用函数式组件和函数路由来配置路由以及如何使用 children 配置来嵌套子路由。您可以根据自己的需求进一步扩展路由配置。确保根据您的项目需求导入和使用所需的组件和路由相关的模块。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。