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

我的有道云参考文档

一、路由的介绍

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页面