React Router v6 路由配置，嵌套路由

原创已于 2022-03-22 14:19:24 修改 · 7.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-03-22 11:52:35 首次发布

react 专栏收录该内容

10 篇文章

订阅专栏

本文对比介绍了如何在React应用中使用<Routes>和useRoutes接口配置React Router，包括基本路径、嵌套路由和组件渲染。通过实例演示了如何在index.js中灵活运用这两种方式来组织和管理路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Router 提供了两个接口来配置路由

<Routes>：通过在jsx中组件方式
useRouters通过对象配置方式

例：在index.js里通过<Routes>配置

import React from 'react';
import ReactDOM from 'react-dom';
import { store } from './app/store';
import { Provider } from 'react-redux';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import { PostsList  } from './features/posts/PostsList';
import { SinglePostPage } from './features/posts/SinglePostPage';
import * as serviceWorker from './serviceWorker';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<App />} />
           {/* 嵌套路由 */}
          <Route path="/postList" element={<PostsList />}>
            <Route index element={<div>我是index默认子路由</div>} />
            <Route path=":id" element={<div>我是子路由元素</div>} />
          </Route>
          <Route path="/singlePostPage/:postId" element={<SinglePostPage />} />
          <Route path="*" element={<App />} />
        </Routes>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

例：在index.js里通过useRouters配置,此处配置可提出至单独文件

import React from 'react';
import ReactDOM from 'react-dom';
import { store } from './app/store';
import { Provider } from 'react-redux';
import { BrowserRouter, useRoutes } from 'react-router-dom';
import App from './App';
import { PostsList  } from './features/posts/PostsList';
import { SinglePostPage } from './features/posts/SinglePostPage';
import * as serviceWorker from './serviceWorker';
import './index.css';

const GetRoutes = () => {
  const routes = useRoutes([
    { path: '/', element: <App /> },
    { 
      path: '/postList',
      element: <PostsList />,
      children: [
        { path: '/postList/:id', element: <div>我是子路由元素</div> },
        { path: '*', element: <div>404</div>}
      ],
    },
    { path: '/singlePostPage/:postId', element: <SinglePostPage /> },
    { path: '*', element: <div>404</div>}
  ])
  return routes;
}
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <GetRoutes />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

注意嵌套路由需要在父路由使用Outlet呈现其子路由元素

import React from 'react';
import { useSelector } from 'react-redux';
import { Link, Outlet } from 'react-router-dom'

export const PostsList = () => {
  const posts = useSelector(state => state.posts);
  const renderedPosts = posts.map(post => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content.substring(0,100)}</p>
      <Link to={`/singlePostPage/${post.id}`}> 查看详情</Link>
    </div>
  ))
  return (
    <section>
      <h2>posts</h2>
      {renderedPosts}
      {/* 子路由渲染位置 */}
      <Outlet />
    </section>
  )
}