如果多级路由的层次，就可以写上一级的路由

2022-07-05

Route 是 React Router中用于配置路由信息的组件，每当有一个组件需要根据 URL 决定是否渲染时，就需要创建一个 Route。

react-router 中的很多特性都与 React 保持了一致，比如它的声明式组件、组件嵌套，当然也包括 React 的状态机特性。

1.path

每个Route都需要一个path属性，path属性是一个url，当URL匹配一个Route时，这个Route中定义的组件就会被渲染出来。

2.Route渲染组间的方式

（1）Component

component的值是一个组件，当URL和Route匹配时，Component属性定义的组件就会被渲染。

（2）Render

Render 值是一个函数，这个函数返回一个React元素。这种方式方便地为待渲染的组件传递额外的属性。

 {
  //MyCom 组件接收了一个额外的data属性

}}>

（3）children

Children的值也是一个函数，函数返回要渲染的React元素。与前面不同是，无论是否匹配成功，children返回的组件都会被渲染。匹配不成功时，match属性为null。

 {
 


   
 

}}

如果Route匹配当前URL，待渲染元素的根节点div的class将设置成active.

3.多级路由

在路由里面继续写路由，挂载组件，就可以实现多级路由。路由嵌套实现。

如果多级路由嵌套的层次太深，那我们写子路由的path就会特别麻烦，所以可以这样：

 {
　　
}}>

Match是从props解构出来，match.path就是我们当前这个路由的路径，这样不管嵌套多深，都可以写上一级的路由

4.动态传参

/foodlist/:id,传过去的值就在路由挂载组件的props中，props里有个match, match中有个params,注意：props只在路由挂载的组件才有

MyCom 组件的props中就可以获取到id

可以在一个组件中用 this.props.history.push(“/path”, {name: “hellow”}), 来进行传参，传过去的值在props.location.state中

5.withRouter

一个典型的高阶组件，如果我们既想实现点击跳转，又不想用Link的a标签，我们可以用withRouter给我们吐出来一个实现点击跳转路由的组件。 Eg.

import { withRouter } from 'react-router-dom’;
//使用自定义的组件：
food
wiki
profile
//给自定义组件实现点击功能：
const CustomNavLink = withRouter(class EnhenceCustomNavLink extends Component {
    render () {

      return (
        

          {
            this.props.location.pathname === this.props.to ? '>' + this.props.children : this.props.children
          }
        
      )
    }
    goto () {
      this.props.history.push(this.props.to)
    }

})

假如你的组件没有路由信息，你可以使用withRouter(component)将这个组件包起来，props里面就有路由信息了。

这里我们顺便了解下前端路由的两种模式：Hash模式和History模式

1、Hash 模式：

这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。Hash 也称作锚点，用来做页面的定位，可以使对应的id的元素显示在可视区域内。

Hash值的变化不会导致浏览器向服务器发出请求，而且hash改变会触发hashchange事件，浏览器的前进和后退也能对其进行控制，在html5的history出现前，基本就是使用hash来实现前段路由的。

window.location.hsah = 'qq' //设置url的hash，会在当前url后加上#qq
var hash = window.location.hsah //qq
Window.addEventListener('hashchange', function() {
 //监听hash变化，点击浏览器的前进后退会触发
)

2, History模式

已经有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，为什么还要搞个 history 呢？

首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

window.history.pushState(state, title, url)
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null

// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
/*如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/ */
window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但这是修改当前历史记录，而 pushState 是创建新的历史记录

window.addEventListener(“popstate”, funbction(){
　　// 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发     
});
window.history.back() // 后退
window.history.forward()// 前进
window.history.go(1) //前进一步，-2为后退两步，window.history.length可以查看当前历史堆栈中页面的数量

history 模式改变 url 的方式会导致浏览器向服务器发送请求，需要在服务器端做处理：如果匹配不到任何静态资源，则应该始终返回同一个 html 页面。

我们再顺便了解下：用户访问的URL后面加入# 号的知识

1. #号的含义：

#号代表网页中的一个位置，# 号后面的内容就是该位置的一个标记，eg.

http://www.example.com/index.html#print

访问该地址，浏览器页面会自动滚动到print 位置，print显示在可视区域

//为页面指定位置的有两种方式：

（1）加锚点  
 (2)