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