4.react路由表

最新推荐文章于 2024-10-06 09:12:51 发布

Dear热热

最新推荐文章于 2024-10-06 09:12:51 发布

阅读量157

点赞数

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

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

版权

react-router 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该文章介绍了如何在React应用中设置路由。首先在src目录下创建routes文件夹，导入Navigate模块和HOME、ABOUT页面组件。然后定义路由配置，包括/home、/about以及默认路由/.在App.js中，使用useRoutes创建路由表并引入routes配置。最后展示包含导航链接和路由渲染的App组件。

摘要由CSDN通过智能技术生成

首先在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;