【react】-- 路由

react路由
开始今天的话题之前，让我们先来了解一下前端路由，Ajax诞生以后，解决了每次用户操作都要向服务器端发起请求重刷整个页面的问题，但随之而来的问题是无法保存Ajax操作状态，浏览器的前进后退功能也不可用，当下流行的两种解决方法是：

1. hash, hash原本的作用是为一个很长的文档页添加锚点信息，它自带不改变url刷新页面的功能，所以自然而然被用在记录Ajax操作状态中了。
2. history, 应该说history是主流的解决方案，浏览器的前进后退用的就是这个，它是window对象下的，以前的history提供的方法只能做页面之间的前进后退，如下：

为了让history不仅仅能回退到上一个页面，还可以回到上一个操作状态。HTML5新增了三个方法，其中两个是在history对象里的：

• history.go(number|URL) 可加载历史列表中的某个具体的页面
• history.forward() 可加载历史列表中的下一个 URL
• history.back() 可加载历史列表中的前一个 URL

为了让history不仅仅能回退到上一个页面，还可以回到上一个操作状态。HTML5新增了三个方法，其中两个是在history对象里的：

• history.pushState(state, title, url)
  添加一条历史记录， state用于传递参数，可以为空。title是设置历史记录的标题，可以为空。url是历史记录的URL，不可以为空。
• history.replaceState(state, title, url)
  将history堆栈中当前的记录替换成这里的url，参数同上。

还有一个事件在window对象下：

window.onpopstate() 监听url的变化，会忽略hash的变化（hash变化有一个onhashchange事件），但是前面的两个事件不会触发它。

好了，到这里你大概猜到了单页面应用或者Ajax操作记录状态用的就是hash和h5增加的history API，这就是react-router-dom 扩展的路由实现，也是web应用最常用的两种路由。

react 路由

安装

yarn add react-router-dom

---

基本路由

导入路由需要的组件

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

路由组件解释

Router         总路由

link           路由导航
----to         切换的链接

Route          路由
----path       对应链接
----component  对应组件

简单路由完整代码

import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
// 导入子组件
class App extends Component {
  render() {
    return (
      
    
        
          
  首页 | 关于 
          

          
          
          
      
    );
  }
}
function Home(){
  return (
我是首页
);
}
function About(){
  return (
我是关于
);
}
export default App;

---

路由的参数

01 定义指令 Link指令

产品1 | 
产品abc

02 定义路由

03 定义组件-获取路由参数

  function Produce({match}){
      return (
我是产品:{match.params.id}
);
  }

match 是组件默认传递的参数， match.paras 组件路由参数对象

出来match对象 还有 history对象和location对象

---

子路由

我们这里用Navlink 讲解它比link 选中的时候多个一个 active 的class

导入Navlink

import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom'

01 定义指令 Link指令

详情

02 定义主路由

03 编写主路由

function Detail({location,match}){
  return (
    

      
参数 | 评论 | 
      

      
      
    
);
}

match.url 获取当前匹配的主路由地址

04 编写子路由

function Arg(){
  return (
我是Arg      
);
}

function Com(){
  return (
我是com
);
}

路由404配置 与Switch

Switch能让匹配的路由唯一

01 导入Switch

import {BrowserRouter as Router,Route,Link,Switch,NavLink,Redirect} from 'react-router-dom'

02 定义路由

定义404路由要写到最后

03 编写404路由

function NoMatch({location}){
   return (
页面没有找到{location.pathname}
);
 }

location 当前的地址
pathname 当了地址信息

---

重定向

我们需要写一个默认的子路由，这个时候可用重定向

01 导入重定向

import {
 BrowserRouter as Router,
 Route,
 Link,
 Switch,
 NavLink,
 Redirect
} from 'react-router-dom'

重新编写 主路由

function Detail({location,match}){
  return (

      
参数 | 评论 | 
      

      
      
            
      
      
    
);
}

from 是可以省略的

---

完整代码

import React, { Component } from 'react';
import Child from './components/Child'
import {BrowserRouter as Router,Route,Link,Switch,NavLink,Redirect} from 'react-router-dom'
// 导入子组件
class App extends Component {
  render() {
    return (
      
    
                  
          
  
            首页 | 
            关于 |
            产品1 | 
            产品abc
|
            详情
          

          
          
          
          
          
          
          
          
      
    );
  }
}
function Home(){
  return (
我是首页
);
}
function About({history}){
  return (
我是关于 {history.go(-1)}}>返回 {history.push("/")}}>首页 
);
}
function Produce({match}){
  return (
我是产品:{match.params.id}
);
}
function NoMatch({location}){
  return (
页面没有找到{location.pathname}
);
}
function Detail({location,match}){
  return (

      
参数 | 评论 | 
      

      
      
      

      
      
    
);
}
function Arg(){
  return (
我是Arg      
);
}
function Com(){
  return (
我是com
);
}
export default App;

组件的参数

function About({match,history,location}){
  console.log(match,history,location)
  return (
我是about
);
}

match 匹配的当前路由

isExact: true ,//是否精确匹配
params:{}// 当前路由的参数
path:{} //路由指定的path
url：{}// link 指定的链接地址

history当前路由信息

go() 历史记录跳转
goBack() 历史记录返回
goFoward() 前进
length  历史记录的长度
push()  跳转 有历史记录
replace() 跳转没有历史记录
location 地址信息
---hash #后面的参数
---pathname 当前路由的地址
---search 问号后面的参数

location 同history的location 当前地址信息

class 编程 js路由跳转

history.push('/login');