React-router-V6.0路由的使用

最新推荐文章于 2025-08-19 11:12:53 发布

原创

最新推荐文章于 2025-08-19 11:12:53 发布 · 5.1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

这篇博客介绍了如何在React应用中使用React Router V6.0进行路由配置和Link组件的跳转。从路由的介绍、安装、配置到Link的使用步骤和嵌套路由的实现，提供了详细的步骤和示例代码，帮助开发者掌握React应用的路由管理。

我的有道云参考文档

一、路由的介绍

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步
通过react-router主要创建单页面的大型应用（SPA）

二、安装路由

先通过npx create-react-app搭建一个项目
1、在react的项目中安装路由react-router或者react-router-dom

npm install react-router-dom --save

package.json里面显示有如下表示安装成功
在这里插入图片描述

三、配置路由

1、index.js中引入需要的组件页面

import User from '../pages/User.js'
import Above from '../pages/Above.js'

2.index.js中通过定义route内的path和element，确定每一个路径path对应的组件element
在这里插入图片描述
3.在app.js中引入配置好的路由文件

到此就配置完成了，配合下面的Link跳转使用

四、Link的跳转

4.1步骤

1、在页面中引入Link
在这里插入图片描述
2.通过Link中的to属性设置跳转的url路径(Link被浏览器解析为a标签)

4.2Link跳转例子

效果图
在这里插入图片描述

1.在src路径下，新建router的文件目录，再目录内新建index.js文件，进行路由的配置
在这里插入图片描述
2.再pages里面创建User.js页面并导出

import {
   
   Link} from 'react-router-dom'

function User(){
   
   
	return(
		<div>
			<Link to="/above">跳转到Above(用户)页面</Link>
		</div>
	)
}

export default User

3.在index.js中定义function，编写路由的配置，并将其导出

import React from 'react'; 
//引入基本的路由模块
import {
   
    BrowserRouter as Router, Route,Routes} from "react-router-dom";

import User from '../pages/User.js'

function router(){
   
   
	return (
		<Router>
			<Routes>
				 //下面这句表示默认进入User.js页面
				 <Route path="/"  element={
   
   <User/>}/>
			</Routes>
		<

最低0.47元/天解锁文章