单页应用(SPA)的多页面切换 需要使用到路由功能。
多个组件的路由和切换 使用路由
React中默认没有安装路由，需要手动安装
安装不指定版本默认是最新版本6
目前大多数项目可能还处于版本5
# 安装5版本
npm install react-router-dom@5
# 不写版本号 就版本6 最新版
npm install react-router-dom
安装指令
npm i react-router-dom@5
安装之后，在package.json确认以下软件名称及其版本
"react-router-dom": "^5.3.0"先装5版本，如果安装了新版本，通过以下命令卸载。重新安装5版本
npm 卸载命令
npm uninstall react-router-dom
BrowserRouter管理整个路由系统
Switch路由切换组件显示对应的位置 @6Routes
Route组件和路径的对应关系
@5 path 路径 URL路径 component 组件
<Route path="/home" component={Home}>@6 path 路径 URL路径 element 标签式调用
<Route path="/home" element={<Home/>}>
Link跳转切换 to 跳转到路径编程方式跳转
@5 rcc写法 路由参数
this.props.match.params
this.props.history.push跳转方法@6 rfc写法 路由参数 useParam 跳转方法 useNavigate
以下为版本5的写法
①建立几个页面
在/src/pages目录下建立A.js,B.js,C.js
页面组件内部，添加一些内容，生成一个组件，如果页面组件为空，切换路由会报错。
src\pages\A.js 其它页面类似结构 文字内容做一个标识，方便切换之后，知道切换到哪个页面了
import React, { Component } from 'react'
export default class A extends Component {
render() {
return (
<div>
A页面
</div>
)
}
}
②编写路由切换
/src/App.js
import React, { Component } from "react";
/**
* 路由组成
* 1.组件和路由对应关系 routes routes=[{path:'/a',component:'组件名称'}]
* 2、router 管理整个路由
* 3、router-link 切换标签 to 路径参数
* 4、router-view 切换的组件展示的位置
*
*/
// 1.导入react中路由的相关组件
// import as 别名 起个小名 方便调用
import {
BrowserRouter as Router, // 管理整个路由系统
Route, // 路径和组件的对应关系
Switch, // 类似router-view切换之后显示组件的位置
Link, // 类似router-link的作用 切换组件
} from "react-router-dom";
// 2.导入页面组件
import A from "./pages/A";
import B from "./pages/B";
import C from "./pages/C";
export default class App extends Component {
render() {
// 3.路由管理
// Router管理整个路由
return (
<Router>
{/* 切换标签 */}
<div>
<Link to="/a">A页面</Link><br/>
<Link to="/b">B页面</Link><br/>
<Link to="/c">c页面</Link><br/>
</div>
<hr/>
{/* 对应关系和组件切换展示位置 */}
<Switch>
{/* Route 对应关系 path路径 component组件 */}
<Route path="/a" component={A}></Route>
<Route path="/b" component={B}></Route>
<Route path="/c" component={C}></Route>
</Switch>
</Router>
);
}
}制作3个页面 名称为HomePage，NewsPage.js，ContactPage.js
首页，新闻页，联系我们
src/App.js
import React, { Component } from "react";
// 路由组件导入
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
// 页面组件导入
import Home from "./pages/HomePage";
import News from "./pages/NewsPage";
import Contact from "./pages/ContactPage";
export default class App extends Component {
render() {
return (
<Router>
<div>
<Link to="/home">首页</Link>
<br />
{/* 传参 步骤2 */}
<Link to="/news/100/标题">新闻</Link>
<br />
<Link to="/contact">联系我们</Link>
</div>
<hr />
<Switch>
{/* 默认访问的组件页面 */}
{/* exact 精确匹配 path路径 */}
<Route path="/" exact component={Home}></Route>
<Route path="/home" component={Home}></Route>
{/* 定义传参方式 步骤一 */}
<Route path="/news/:id/:title" component={News}></Route>
<Route path="/contact" component={Contact}></Route>
</Switch>
</Router>
);
}
}src\pages\NewsPage@5.js
import React, { Component } from 'react'
export default class NewsPage extends Component {
// React中把组件外部传入的数据 存放在props
// 路由参数也存放在props
render() {
console.log(this.props);
// es6 解构语法 从props中获取路由参数
const {id,title} = this.props.match.params;
// 获取编程跳转路由的方法
const {push} = this.props.history;
return (
<div>
新闻页
<div>id:{id}</div>
<div>title:{title}</div>
{/* 编程方式跳转 通过事件触发方法 */}
<button onClick={()=>push('/home')}>回到首页</button>
<button onClick={()=>push('/contact')}>去联系我们</button>
</div>
)
}
}---------------------------------------------------------------------------------------------------------------------------------
下面是6版本
尝试6版本的写法，需要卸载5版本
卸载时关闭脚手架服务 ctrl+c
6版本中 编程跳转和接收路由参数 只能使用rfc
npm uninstall react-router-dom
npm i react-router-dom/src/App.js
import React, { Component } from "react";
// 路由组件导入
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";
// 页面组件导入
import Home from "./pages/HomePage";
import News from "./pages/NewsPage";
import Contact from "./pages/ContactPage";
export default class App extends Component {
render() {
return (
<Router>
<div>
<Link to="/home">首页</Link>
<br />
{/* 传参 步骤2 */}
<Link to="/news/100/标题">新闻</Link>
<br />
<Link to="/contact">联系我们</Link>
</div>
<hr />
<Routes>
{/* 默认访问的组件页面 */}
{/* exact 精确匹配 path路径 */}
<Route path="/" exact element={<Home/>}></Route>
<Route path="/home" element={<Home/>}></Route>
{/* 定义传参方式 步骤一 */}
<Route path="/news/:id/:title" element={<News/>}></Route>
<Route path="/contact" element={<Contact/>}></Route>
</Routes>
</Router>
);
}
}
src\pages\NewsPage@6.js
import React from 'react'
import {useParams,useNavigate} from 'react-router-dom'
// hook rfc特性 react-router-dom
// 路由参数结构 useParams()
// 编程方式跳转 useNavigate()
export default function NewsPage() {
// 获取路由参数
const params = useParams();
console.log(params);
// es6解构语法获取id和title
const {id,title} = params
// 获取跳转方法
const navigate = useNavigate();
return (
<div>
新闻页
<div>id:{id}</div>
<div>title:{title}</div>
{/* 编程方式跳转 通过事件触发方法 */}
<button onClick={()=>navigate('/home')}>回到首页</button>
<button onClick={()=>navigate('/contact')}>去联系我们</button>
</div>
)
}