安装路由的环境

import{BrowserRouter as Router} from "react-router-dom"
3.两种模式(hash模式,历史纪录模式)
hash模式:后面带#号的 HashRouter
拿到#号后面的值:location.hash
历史纪录模式: BrowserRouter(原理，window.history.State)
import {BroswerRouter as Router} from "react-router-dom"
4.使用 Router App/ /router 将其包起来,通过context传到他下面的所有子孙组件里面
5.引图片(public可以直接引入，不需要require，src下面的图片再用require)
6.引入sass
yarn add node-sass sass-loader
7.阿里矢量图标库如何使用：
font放在public,在public里面的index.html下面引入iconfont.css
8、移动端适配
html{font-size:13.33333vw}
body{font-size:14px}
1. Route path="/路径" compOnent={组件名} /Route
2.NavLink带样式:点击后会出现active的class类名(在index.js里面设置css样式)
Link不带样式
3.路由切换组件三个属性
history 编程式导航
location(search,state)
match (params)
exact精确匹配
Redirect from="/" to="/one" exact /Redirect
引入redirect(重定向)

Route compOnent={}
但是此时404页面会出现在所有页面，，解决办法是引入Switch，同时要将Route404这个组件写在最下面

轮播(只有当数据请求到了之后,财经数据发送过去，所以此处做了一个三元运算符进行判断)
实例代码：

请求数据的组件：
import React, { Component } from 'react'
import MySwiper from "../myswiper"
export default class Test2 extends Component {
constructor(props){
super(props)
this.state ={
list:[]
//这个组件的做用就是异步拿到数据，传给子组件
componentDidMount(){
this.getData()
getData(){
fetch("http://localhost:4000/list").then((res)= res.json()).then((res)= {
this.setState({
list:res
render() {
return (
div
test2
{this.state.list.length 0?
MySwiper list={this.state.list} / :""}
/div

lunbo：

import React, { Component } from 'react'
import Swiper from 'swiper'
import "swiper/css/swiper.css"
export default class Test extends Component {
constructor(props){
super(props)
this.state ={
list:[]
componentDidMount(){
this.getData()
// new Swiper ('.swiper-container', {//如果内容是静态的，可以这样做
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// }
// })
componentDidUpdate(){
//说明数据变化了，异步数据回来
new Swiper ('.swiper-container', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
getData(){
fetch("http://localhost:4000/list").then((res)= res.json()).then((res)= {
this.setState({
list:res
render() {
return (
div
{this.state.list.length}
div className="swiper-container"
div className="swiper-wrapper"
this.state.list.map((item)= {
return div className="swiper-slide" key={item.bannerId}
{item.name}
/div
/div
div className="swiper-pagination" /div
/div
/div

}

withRouter(在路由组件传值时一定要引入withRouter)

监控路由的变化，默认情况下必须经过路由匹配渲染的组件才存在this.props,才拥有路由参数，执行this.props.history.push('/detail')跳转到对应路由的页面，然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，将react-router的history、location、match三个对象传入props对象上，此时就可以使用this.props。
引入：import{withRouter} from “react-router-dom”
导出：export default withRouter(App);
解决刷新出现react的默认标题栏
刷新时调用一次 在constructon里有调用了一此函数，将this.props.location.pathname传入，就不会刷新产生react
当引入withRouter后就会出现三个参数，location,match,history

监控路由参数的变化(路由传参)

:type传参
取得参数：this.props.match.params.type

useState（新特性） hook

let [a,setA] = userState(1)初始值赋值给a
前面的两个参数为自定义的
let [数据，修改数据的函数] = useState('可以传默认值')

编程式导航：this.props.history.push listen go ...适合做编程式导航和及监听路由的变化("/list/"+type)
match 主要是用于取路由的参数 this.props.match.params.参数
location location.pathname 还能查询location.search 就是？号后面的参数，查询字符串
###qs包
qs这个包可以将这个参数（查询字符串）拆分,?a=xxx b=xxx
import qs from "queryString" 引入包
location.search.slice(1)去问号
qs.parse(location.search.slice(1)) {a:xxx,b:yyyy}
location.state 可以传递多个值 console.log(this.props.location.state)

无状态组件的路由传值（第一种方法）

组件1：
div className="App"
NavLink to="/list/users" users /NavLink
NavLink to="/list/goods" goods /NavLink
Route path="/list/:type" compOnent={List} /Route
/div
1.此时在componentDidMount打印this.props 会出现三个参数(match,history,location)
2.使用match里面的this.props.match.params.type拿到变化的路由参数
3.在state中设置参数和数据的初始值
this.state={list:[],type=""}
4.在componentDidMount(){}在组件加载的时候请求数据，分别调用getData方法，只走一次
5.在componentDidUpdate(){}在组件变化时监听路由变化，监听变化
6.因为在componentDidUpdate中监听了路由的变化，并调用了getdata方法修好改了type值，
#####所以一定要判断一下两次切换的路由的值不相等，否侧会不停的请求数据
7.在setState中一定要修改type值否则数据无法切换，值无法拿到无状态组件的路由传值的第二种方法

function App(props) {
console.log(props)
return (
div className="App"
//第一种方法：
{/* NavLink to="/list/users" users /NavLink
NavLink to="/list/goods" goods /NavLink */}
//第二种方法：
button ()= {props.history.push("/list/user")}} user /button
button ()= {props.history.push("/list/goods")}} goods /button
Route path="/list/:type" compOnent={List} /Route
/div

类组件

​ 第一种方法

第二种方法

接收的组件使用：

console.log(this.props.match.params.type)
1、NavLink activeClassName 可以指定当前路由的类名
2、 this.props.history.push(“/list”,{type})
第二个组件console.log(this.props.location.state.type)
params 默认值 是一个{} state的默认值是undefined
state传值(传多个值)，params传值，(一个参数)
NavLink Link 除了可以 to=“字符串”，还可以写对象to={{pathName:’/list’}}
所以此时做判断
if(!this.props.location.state.type) return

权限路由：

Route path="/two" render={(props)= {return sessionStorage.getItem('user')? Two {...props}/ : Redirect to="/login" }} /Route
​ redirect组件 to属性可以传值
​ to={{pathname:’/login},state:{key:value}}

​

文章来源于https://www.cnblogs.com/cc0419/p/12546683.html