4.react路由表

最新推荐文章于 2023-07-20 17:08:35 发布

Dear热热

最新推荐文章于 2023-07-20 17:08:35 发布

阅读量113

点赞数

分类专栏： react-router 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_45414972/article/details/131249866

版权

react-router 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先在src目录下创建routes文件夹

然后引入Navigate模块和响应的页面

import {Navigate } from 'react-router-dom';    // 路由插件
import HOME from "../pages/home";
import ABOUT from "../pages/about";


const indexRouter  = [
    {
        path:'/home',
        element:<HOME />
    },
    {
        path:'/about',
        element:<ABOUT />
    },
    {
        path:'/',
        element:<Navigate to='/home' />
    }
]

export default indexRouter

然后在app.js创建useRoutes模块用于创建路由表，在引入routes文件

// App.js
import './App.css';
import { NavLink, useRoutes } from 'react-router-dom';    // 路由插件
import routes from './routes'


function App() {
	const element = useRoutes(routes)
	return (
		<div>
			<NavLink to='/home'>首页</NavLink>
			<NavLink to='/about'>分类</NavLink>
			<br />
			{element}
		</div >
	);
}

export default App;