1. React Router的理解
React的路由根据项目的不同使用不同的路由库,web应用主要使用react-router和react-router-dom
react-router和react-router-dom的区别
-
react-rotuer核心库,提供了一些核心的api,但是没有提供dom操作进行跳转的api -
react-router-dom扩展了核心库,提供了一些操作DOM的api, - web应用正常使用
react-router-dom就可以了, 因为它自己同样依赖react-router
2. 路由组件认识
2.1 路由组件的认识
在react中和vue不同的是,路由不是配置的文件,而是组件, 正常的组件嵌套使用
在React router中通常使用的组件有三种
- 路由器组件: 如BrowserRouter(history模式) 和 HashRouter(hash模式)
- 路由匹配组件: Route 和 Switch 组件
- 导航组件: Link 和 NavLink 组件
2.2. 相关API
// 路由器组件
// 路由器组件
// 显示路由组件,嵌套在路由器组件中
// 路由切换组件,如果配置成功多个路由也只会显示第一个
// 路由导航组件
// 路由导航组件
// 路由重定向组件
3. 路由组件的使用
3.1 下载路由组件库
$ npm install react-router-dom --save
## or
$ yarn add react-router-dom
3.2 路由器组件的使用
3.2.1 路由器组件说明:
- 每一个React Router应用程序的核心都应该是路由器组件
-
react-router-dom提供了BrowserRouter和HashRouter -
BrowserRouter采用常规路径显示方式的history路由显示模式 -
HashRouter采用锚点显示的hash路由显示模式
3.2.2 BrowserRouter组件的使用
基本使用
采用history路由模式显示路由
示例代码:
// 导入路由器
import {BrowserRouter} from "react-router-dom"
// 使用路由器组件嵌套根组件APP
ReactDOM.render(
,
document.getElementById('root')
);
为什么使用BrowserRouter嵌套根组件APP呢?
其实没有说一定要嵌套APP根组件, 只是导航组件和路由组件必须嵌套的路由器组件中才会有效,否则就会报错
因此只要在你是用的导航组件和路由组件外嵌套即可, 嵌套根组件表示整个应用任何位置都可以是使用路由组件
BrowserRouter路由器采用history前端路由模式, 因此在路径显示上没有#
如下:
http://localhost:3000/goods
3.2.3 HashRouter组件的使用
HashRouter采用hash模式的前端路由, 以此会出现#/home
示例代码:
// 导入路由器
import {HashRouter} from "react-router-dom"
// 使用路由器组件嵌套根组件APP
ReactDOM.render(
,
document.getElementById('root')
);
路径显示结果:
http://localhost:3000/#/goods
3.2.4 路由器的别名使用
有的时候会将路由器组件在使用import导入是修改别名
示例代码如下
// 将HashRouter 路由器组件修改为别名Router使用
import {HashRouter as Router} from "react-router-dom"
// 使用路由器组件的别名
ReactDOM.render(
,
document.getElementById('root')
);
3.3 路由匹配组件的使用
3.3.1 路由匹配组件Route的使用
Route组件用来控制路径对应显示的组件
说明:
-
Route组件基本的两个属性,一个是path,一个是component -
path属性表示用来匹配路径,党路径匹配成功后展示component的内容 -
component属性值是将来用于展示的组件
示例代码如下:
import {Route, Link} from 'react-router-dom'
// 导入组件
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"
// App组件
function App() {
return (
{/*
Route路由展示组件
当path的值和路径匹配成功后显示component对应的组件
*/}
);
}
示例代码说明:
- 上面的示例代码,在默认打开是不显示任何组件内容,
- 默认打开的路径为
/所以Route中的路径都匹配不成功 - 如果希望
/路由对应的显示内容也为首页, 就可能会如下写法
示例代码
import {Route, Link} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"
function App() {
return (
);
}
示例代码说明:
- 示例的本意是希望
/home和/路径都展示首页组件,/表示默认打开显示首页 - 但是示例真实的情况是,无论
/home,/goods,/about路径,最后一个/Route都会展示 - 这样就导致了页面会同时渲染两个组件,
3.3.2 Switch组件
Switch组件说明:
- Switch组件用于包裹Route组件, 表示只会渲染第一个与路径配置成功的Route组件对应的内容
- 如果有两个组件都匹配路径都成功,也只会显示第一个,
- 或者显示Redirect重定向组件内容
- 也就是说路径只会匹配到第一个成功的Route就不会在下匹配其他Route组件了,
- 如果不使用Switch组件,则会将所有Route组件都匹配一下,所有匹配成功的组件都会展示
示例代码如下
import {Route, Link,Switch} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"
function App() {
return (
);
}
示例说明:
- 这样就解决了之前存在的问题
- 当路由为
/时匹配最后一个Route,因此展示首页 - 如果当路由匹配到
/goods,展示商品页,此时会中断匹配, 也就不会匹配到/,此时也不会再次展示一个首页组件
3.4 导航组件
3.4.1 导航组件说明:
- 导航组件的作用是用来点击跳转路由,为
Link和NavLink -
Link组件和NavLink组件的区别在于时候会添加额外的类名 -
Link组件在跳转路由时,当前活跃的导航不会添加任何类名 -
NavLink跳转路由,会给当前活跃的导航添加额外的类名,可以利用类名添加不同的样式
3.4.2 Link组件的使用
Link组件有一个to属性, 有来指定跳转到那个路由
示例代码如下:
import {Route, Link,Switch} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"
function App() {
return (
首页
商品页
关于页
);
}
示例说明:
-
Link标签会被编译为a标签 -
to属性表示当你点击时,跳转到那个路由上 - 但是不会添加任何额外的类名
控制台Elements里展示的内容
因此没发确定当前那个导航对应的路由是活跃状态
3.4.3 NavLink 组件的使用
NavLink会给当前活跃的路径导航添加额外的类名, 利用添加给导航添加不同的样式
因此NavLink组件使用相对较多
示例代码:
import {Route, NavLink,Switch} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"
function App() {
return (
首页
商品页
关于页
);
}
示例显示后的Elements结果