react-router高级使用

三. react-router高级使用

1. 路由嵌套

在开发中，路由之间是存在嵌套关系的。
这里我们假设about页面中有两个页面内容：

• 商品列表和消息列表；
• 点击不同的链接可以跳转到不同的地方，显示不同的内容；

import React, {
    PureComponent } from 'react';

import {
    Route, Switch, Link } from 'react-router-dom';

//下面是函数式组件
function AboutProduct(props) {
   
  return (
    <ul>
      <li>商品列表1</li>
      <li>商品列表2</li>
      <li>商品列表3</li>
    </ul>
  )
}

function AboutMessage(props) {
   
  return (
    <ul>
      <li>消息列表1</li>
      <li>消息列表2</li>
      <li>消息列表3</li>
    </ul>
  )
}

export default class About extends PureComponent {
   
  render() {
   
    return (
      <div>
        <Link to="/about">商品</Link>
        <Link to="/about/message">消息</Link>

        <Switch>
          <Route exact path="/about" component={
   AboutProduct} />
          <Route path="/about/message" component={
   AboutMessage} />
        </Switch>
      </div>
    )
  }
}

2. 手动跳转

目前我们实现的跳转主要是通过Link或者NavLink进行跳转的，实际上我们也可以通过JavaScript代码进行跳转。但是通过JavaScript代码进行跳转有一个前提：必须获取到history对象。

如何可以获取到history的对象呢？两种方式

• 方式一：如果该组件是通过路由直接跳转过来的，那么可以直接获取history、location、match对象；
• 方式二：如果该组件是一个普通渲染的组件，那么不可以直接获取history、location、match对象；

那么如果普通的组件也希望获取对应的对象属性应该怎么做呢？

• 前面我们学习过高阶组件，可以在组件中添加想要的属性；
• react-router也是通过高阶组件为我们的组件添加相关的属性的；

如果我们希望在App组件中获取到history对象，必须满足以下两个条件：

• App组件必须包裹在Router组件之内；
• App组件使用withRouter高阶组件包裹；

index.js代码修改如下：

ReactDOM.render(