React页面路由

目录

一、页面路由

1、页面路由的方式

二、React的页面路由模块

1、安装：npm install react-router-dom

2、实现路由模式的组件(最外层)：决定路由模式

3、Route组件：实现路径和显示组件之间的映射

4、Router组件

5、Link和NavLink组件：类似于标签

6、Redirect组件：页面重定向。属性和Link相同

7、Switch组件：进行路由切换。类似Tab标签

8、withRouter组件

9、404视图

---

一、页面路由

1、页面路由的方式

（1）hash模式：在url后面带#

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

hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。

 缺点：传递参数的方式是在url后拼接,会有体积的限制

使用到的api：

• window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq'

• var hash = window.location.hash // '#qq'

• window.addEventListener('hashchange', function(){

      // 监听hash变化，点击浏览器的前进后退会触发

  })

（2）history模式

• 可以传递复杂的参数
• 可以监听浏览器的前进、后退事件(back、forward、go)

hash 的传参是基于 url的，如果要传递复杂的数据，会有体积的限制，而history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中

 使用到的api

• 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 基本相同，但replaceState是修改当前历史记录，而 pushState 是创建新的历史记录

• window.addEventListener("popstate", function() {

      // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发

  });

• window.history.back() // 后退

• window.history.forward() // 前进

• window.history.go(1) // 前进一步，-2为后退两步，window.history.length可以查看当前历史堆栈中页面的数量

二、React的页面路由模块

react-router-dom的使用

1、安装：npm install react-router-dom

2、实现路由模式的组件(最外层)：决定路由模式

• HashRouter组件：实现hash模式的路由

// hash模式
ReactDOM.render(
	 <HashRouter>
      	<Route path="/" component={Home}/>
</HashRouter>
)

• BrowserRouter组件：实现history模式的路由

// history模式
ReactDOM.render(
	   <BrowserRouter>
      	 <Route path="/" component={Home} />
      </BrowserRouter>
)

3、Route组件：实现路径和显示组件之间的映射

<Route path="/users" component={组件} render={返回dom} location="route对象" exact="匹配规则"/>

path：跳转的路径

component： 对应路径显示的组件

render：可以自己写render函数返回具体的dom，而不需要去设置component

location： 传递route对象，和当前的route对象对比，如果匹配则跳转

exact： 匹配规则，true的时候则精确匹配

• 若用render渲染dom，就不需要component
• exact的默认值为false，若设置为true则表示精确匹配
• 不同版本的react-router-dom，Route的属性也不同
• react-router-dom6.0以下的版本

 <Route path="/users" component={组件} render={返回dom} location="route对象" exact="匹配规则"/>

• react-router-dom6.0(含6.0)以上的版本

<Route path="/users" element={组件} render={返回dom} location="route对象" exact="匹配规则"/>

4、Router组件

• 底层路由,使用的前提是路由模式必须是history模式。可以管理路由的状态

• <Router history={history}> ...</Router>

5、Link和NavLink组件：类似于<a>标签

• Link组件的api属性         

字符串写法<Link to="" />，to属性表示目标页面的路径

对象写法
<Link to={{
      pathname: '/courses',
      search: '?sort=name',
      hash: '#the-hash',
      state: { fromDashboard: true }
}}/>
//replace：就是将push改成replace
//innerRef：访问Link标签的dom

• NavLink组件的api属性：包含了Link组件的所有api,在Link组件的基础上进行了扩展

1.  Link的所有api
2. activeClassName 路由激活的时候设置的类名
3. activeStyle 路由激活设置的样式
4. exact  参考Route，符合这个条件才会激活active类
5. strict  参考Route，符合这个条件才会激活active类
6. isActive 接收一个回调函数，active状态变化的时候回触发，返回false则中断跳转

const oddEvent = (match, location) => {
    console.log(match,location)
    if (!match) {
        return false
    }
    console.log(match.id)
    return true
}

<NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>

location 接收一个location对象，当url满足这个对象的条件才会跳转

<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/> 

6、Redirect组件：页面重定向。属性和Link相同

注意：页面重定向：客户端向服务器端发送了两次请求

           请求转发：客户端向服务器发送了一次请求

7、Switch组件：进行路由切换。类似Tab标签

Switch内部只能包含Route、Redirect、Router

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

8、withRouter组件

包装器,将普通的组件包装成路由组件。包装后普通组件就可以访问路由信息(如：history、location、match)

import { withRouter } from 'react-router-dom'
const MyComponent = (props) => {
    const { match, location, history } = this.props
     return (
        <div>{props.location.pathname}</div>
    )
}
const FirstTest = withRouter(MyComponent);

9、404视图

404错误表示客户端请求的资源不存在。在react中请求的路径不存在(404),路由采用Switch组件进行切换

Switch组件的作用类似于JS中的switch语句，当一项匹配成功之后，就不再匹配后续内容。这样的话就可以把要匹配的内容写在Switch组件中，最后一项写404视图，当其他都匹配不成功时就是404视图

<Switch>
  <Route exact={true} path={"/"} component={Home}/>
  <Route path={"/about"} component={About}/>
  <Route path={"/topics"} component={Topics}/>
  <Route component={View404}/>
</Switch>