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

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>
  )
}