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页面
				 <Route path="/"  element={<User/>}/>
			</Routes>
		</Router>);
}

export default router;

4.在app.js中引入配置好的路由文件

import './App.css';
//导入index.js
import Router from './router/index.js'

function App() {
  return (
    <div className="App">
      <Router></Router>
    </div>
  );
}

export default App;

4.3完整代码

User.js

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

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

export default User

index.js

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>
		</Router>);
}

export default router;

App.js

import './App.css';
import Router from './router/index.js'

function App() {
  return (
    <div className="App">
      <Router></Router>
    </div>
  );
}

export default App;

above.js

// 导入Outlet,它为视图出口
import {Link,Outlet} from 'react-router-dom'
function Above(){
	return(
		<div>
			<h1>用户界面</h1>
			<Link to="/above">微信登录</Link> |
			<Link to="/above/wechat">QQ登录</Link>
			<Outlet></Outlet>
		</div>
	)
}

export default Above

五、嵌套路由

5.1使用步骤

1、直接通过Route标签进行嵌套配置

2、在父组件User内引入Outlet，进行视图渲染

5.2嵌套路由例子

前提是安装了路由
1.在pages创建QQ和微信页面

2.index.js配置嵌套路由

3.above页面引入Outlet进行视图渲染

5.3完整代码

index.js

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

// 导入页面
import QQ from '../pages/QQ.js'
import Wechat from '../pages/Wechat.js'

function router(){
	return (
		<Router>
			<Routes>
				 <Route path="/"  element={<User/>}/>
				 
				 <Route path="/above"  element={<Above/>}>
					<Route path="" element={<Wechat />}></Route>
					<Route path="/above/wechat" element={<QQ />}></Route>

					//这种写法也行
					<Route path="" element={<Wechat />}></Route>
					<Route path="wechat" element={<QQ />}></Route>
				 </Route>
			</Routes>
		</Router>);
}

export default router;

App.js

import './App.css';
import Router from './router/index.js'

function App() {
  return (
    <div className="App">
      <Router></Router>
    </div>
  );
}

export default App;

User.js

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

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

export default User

Above.js

// 导入Outlet,它为视图出口
import {Link,Outlet} from 'react-router-dom'
function Above(){
	return(
		<div>
			<h1>用户界面</h1>
			<Link to="/above">微信登录</Link> |
			<Link to="/above/wechat">QQ登录</Link>
			<Outlet></Outlet>
		</div>
	)
}

export default Above

QQ.js

function QQ(){
	return(
		<div>
			<h1>QQ页面</h1>
		</div>
	)
}

export default QQ

Wechat.js

function Wechat(){
	return(
		<div>
			<h1>微信页面</h1>
		</div>
	)
}

export default Wechat