React中路由参数如何改变页面不刷新数据的情况

目录

• React路由参数改变页面不刷新数据的情况
• React页面路由
• 前端路由和后端路由
• 前端路由介绍
• 匹配模式
• 路由的执行过程
• hash模式
• history模式
• react-router-dom API

React路由参数改变页面不刷新数据的情况

路由的参数由于是在componentDidMount中获取的，如果在详情页面再次打开详情页面，由于组件并没有重新渲染，导致didMount不会获取路由参数。

因此在参数改变的时候，可以利用componentWillReceiveProps来更新变量。

// 获取路由参数
  componentDidMount() {
    const didMountId = this.props.location.query.id;
    this.setState({ id: didMountId }, () => {
      this.props.pageList({ id: this.state.id }); // 请求接口获取数据
    });
  }
//组件更新时被调用
  componentWillReceiveProps(newProps) {
    if (newProps.location.query.id !== this.state.id) {
      this.setState({ id: newProps.location.query.id},  () => {
        this.props.pageList({ id: this.state.id});  //当路由参数改变时，重新请求接口获取数据
      });
    }
  }

React页面路由

前端路由和后端路由

在web开发早期的年代里，前端的功能远不如现在这么强大，一直是后端路由占据主导地位。服务端渲染就是在浏览器请求页面URL时，（每次切换页面时，浏览器都会刷新页面）服务端按照不同的URL地址与不同的html + css + 后端数据 之间的映射，直接将我们需要的HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过JavaScript脚本的执行，可直接构建出完整的DOM树并展示页面中。

前端路由介绍

随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是单页Web应用(Single Page Web Application,SPA))的兴起，前端路由系统随之开始流行。

1、用户的角度

前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：

记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）；

可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）；

2、作为开发者

要实现这两个功能，我们需要做到：

改变url且不让浏览器向服务器发出请求；

监测 url 的变化；

截获 url 地址，并解析出需要的信息来匹配路由规则。

匹配模式

模糊匹配模式

• 默认情况下, React路由是模糊匹配模式
• 模糊匹配规则：只要pathname以path开头就会匹配成功，对应的组件就会被渲染出来。

精确匹配

• 给 Route组件添加exact属性，让其变为精确匹配模式
• 精确匹配：只有当path和 pathname完全匹配时才会展示该路由，严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由。

路由的执行过程

• 点击Link组件(a标签）会修改浏览器地址栏中的url
• React路由监听到地址栏url的变化。
• Reat路由内部遍历所有 Route组件，使用路由规则(path)与 pathname进行匹配。
• 当路由规则(path)能够匹配地址栏中的pathname时，就展示渲染该 Route组件的内容

hash模式

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

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

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

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可以是绝对路径，也可以是相对路径。

window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录
window.addEventListener("popstate", function() {
    // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发
});
window.history.back() // 后退
window.history.forward() // 前进
window.history.go(1) // 前进一步，-2为后退两步，window.history.length可以查看当前历史堆栈中页面的数量

react-router-dom API

React实现页面路由的模块：react-router-dom

1、HashRouter和BrowserRouter

其实就是路由的hash和history两种模式，并且这两个组件是路由的容器，必须在最外层。

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

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

2、Route

路由的一个原材料，它是控制路径对应显示的组件。 Route的参数：

• path：跳转的路径
• component： 对应路径显示的组件
• render：可以自己写render函数返回具体的dom，而不需要去设置component。
• location： 传递route对象，和当前的route对象对比，如果匹配则跳转
• exact： 匹配规则，true的时候则精确匹配。

3、Link和NavLink

(1)Link的api

to： 有两种写法，表示跳转到哪个路由

字符串写法

<Link to="/a"   />

对象写法

  <Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

• replace：就是将push改成replace
• innerRef：访问Link标签的dom

(2) NavLink的api

• Link的所有api
• activeClassName 路由激活的时候设置的类名
• activeStyle 路由激活设置的样式
• exact 参考Route，符合这个条件才会激活active类
• strict 参考Route，符合这个条件才会激活active类
• 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" }}/>

4、Redirect：页面重定向

// 基本的重定向
<Redirect to="/somewhere/else" />
// 对象形式
<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>
// 采用push生成新的记录
<Redirect push to="/somewhere/else" />
// 配合Switch组件使用，form表示重定向之前的路径，如果匹配则重定向，不匹配则不重定向
<Switch>
  <Redirect from='/old-path' to='/new-path'/>
  <Route path='/new-path' component={Place}/>
</Switch>

5、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>

6、Router Hooks

在Router5.x中新增加了Router Hooks用于在函数组件中获取路由信息。使用规则和React的其他Hooks一致。

• useHistory：返回history对象
• useLocation：返回location对象
• useRouteMatch：返回match对象
• useParams：返回match对象中的params，也就是path传递的参数

   import React from ‘react';
    import { useHistory } from ‘react-router-dom';
 function backBtn(props) {
        let  history = useHistory;
        return <button onClick={ ()=> {
              history.goBack();
}>返回上一页</button>
       }

7、history对象

在每个路由组件中我们可以使用this.props.history获取到history对象，也可以使用withRouter包裹组件获取，在history中封装了push，replace，go等方法，具体内容如下：

History {
    length: number;
    action: Action;
    location: Location;
    push(path: Path, state?: LocationState): void; // 调用push前进到一个地址,可以接受一个state对象，就是自定义的路由数据
    push(location: LocationDescriptorObject): void; // 接受一个location的描述对象
    replace(path: Path, state?: LocationState): void; // 用页面替换当前的路径，不可再goBack
    replace(location: LocationDescriptorObject): void; // 同上
    go(n: number): void; // 往前走多少也页面
    goBack(): void; // 返回一个页面
    goForward(): void; // 前进一个页面
    block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;
    listen(listener: LocationListener): UnregisterCallback;
    createHref(location: LocationDescriptorObject): Href;
}

这样我们想使用api来操作前进后退就可以调用history中的方法

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。