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

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

• ：通过在jsx中组件方式
• useRouters通过对象配置方式

 例：在index.js里通过配置

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(
  
    
      
        
          } />
           {/* 嵌套路由 */}
          }>
            我是index默认子路由

} /> 我是子路由元素

} /> } /> } /> , 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:  },
    { 
      path: '/postList',
      element: ,
      children: [
        { path: '/postList/:id', element: 
我是子路由元素
 },
        { path: '*', element: 
404
}
      ],
    },
    { path: '/singlePostPage/:postId', element:  },
    { path: '*', element: 
404
}
  ])
  return routes;
}
ReactDOM.render(
  
    
      
        
      
    
  ,
  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 => (
    

      
{post.title}
      
{post.content.substring(0,100)}
       查看详情
    
  ))
  return (
    

      
posts
      {renderedPosts}
      {/* 子路由渲染位置 */}
      
    
  )
}