React Router 提供了两个接口来配置路由
例:在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默认子路由
例:在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}
{/* 子路由渲染位置 */}
)
}