react v6创建原生路由表

在React Router v6中，路由配置的方式有所不同。新版本的React Router使用了不同的API和概念来管理路由。以下是一个简单的示例来创建原生路由表：

1. 首先，确保你已经安装了React Router v6。你可以使用npm或者yarn来安装它。

   npm install react-router@next react-router-dom@next

2. 在你的应用程序的根组件中，引入Router和Route组件，并将其包裹在你的应用程序中。Router组件是React Router v6提供的根路由组件。

   import { Router, Route } from 'react-router-dom';

   function App() {
     return (
       <Router>
         {/* Your app components */}
       </Router>
     );
   }

3. 在需要添加路由的组件中，使用Route组件来定义路由和对应的组件。可以在App组件中定义路由，也可以在其他子组件中定义路由。

   import { Route } from 'react-router-dom';

   function Home() {
     return <h1>Home Page</h1>;
   }

   function About() {
     return <h1>About Page</h1>;
   }

   function App() {
     return (
       <Router>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Router>
     );
   }

在上面的例子中，当用户访问根路径"/"时，将加载Home组件；当用户访问路径"/about"时，将加载About组件。

4. 你还可以使用Link组件来创建导航链接，使用户能够点击链接切换到其他页面。

   import { Link } from 'react-router-dom';

   function Navigation() {
     return (
       <nav>
         <ul>
           <li>
             <Link to="/">Home</Link>
           </li>
           <li>
             <Link to="/about">About</Link>
           </li>
         </ul>
       </nav>
     );
   }

在上面的例子中，用户可以点击"Home"和"About"链接切换到对应的页面。

这只是一个简单的示例，React Router v6还提供了更多高级的路由配置选项，如嵌套路由、路由参数等。你可以参考React Router v6官方文档以获取更多信息和示例。请注意，React Router v6与之前的版本有一些重大更改，所以确保你参考的文档和示例是针对React Router v6的。