② React-Router 万物皆组件

React-Router 万物皆组件

目录

• React-Router 万物皆组件
  • 1 路由跳转
    • 1.1 React-Route4 内置组件的使用
      • 1. 内置组件 HashRouter
      • 2. 内置组件 Route
  • 2 常用组件
    • 2.1 路由类型
      • 1. BrowserRouter
      • 2. HashRouter
    • 2.2 路由渲染方式
      • 1. Route
      • 2. Redirect
      • 3. Switch
  • 3 导航
    • 3.1 声明式导航
      • 1. Link
      • 2. NavLink
    • 3.2 编程式导航
      • 1. 如何获取 history 对象？
    • 3.3 路由的 enter leave
  • 4 动态路由
    • • 获取动态id方式
  • 5 嵌套路由

1 路由跳转

1.1 React-Route4 内置组件的使用

• npm i react-router-dom

1. 内置组件 HashRouter

main.js

import React from 'react';
import { render } from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './App';
render(
  <HashRouter>
    <App/>
  </HashRouter>
, document.querySelector('#app')
)

2. 内置组件 Route

App.js

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Home from './pages/Home';
class App extends Component {
  render(){
    return (
      <div>
        App
        <Route path="/home" component={Home}/>
      </div>
    )
  }
}
export default App;

Home.js

import React, { Component } from 'react';
class Home extends Component {
  render(){
    return (
      <div>
        Home
      </div>
    )
  }
}
export default Home;

2 常用组件

2.1 路由类型

1. BrowserRouter

• <BrowserRouter/>是 react-router-dom 增加的组件
• 利用 path 来实现路由（类似于 Vue 中的 history 路由，使用 pushState 和 replaceState 事件构建路由）

需要服务器的配置

2. HashRouter

• <HashRouter/> 是 react-router-dom 增加的组件
• 利用 hash 来实现路由（使用 window.location.hash 和 hashchange 事件构建路由）

2.2 路由渲染方式

1. Route

<Route/> 是 React-Router 中最重要的组件
当页面的访问地址与 Route 上的 path 匹配时，就在 <Route/> 所在位置渲染出对应的组件

<Route path='/mine' component={Mine}/>
<Route path='/goods' component={Goods}/>
<Route path='/notfound' render={( )=><div>404页面</div>}/>

• path
• component
• exact(Boolean)：是否精确匹配

2. Redirect

<Redirect/> 用于重定向页面

• from(String)：浏览器地址为 from 的值时，重定向到 to 所在的地址
• to(String|Object)：跳转的地址

3. Switch

• 多个 Route 可能会被同时渲染
• 用 <Switch/> 来包裹多个 Route、Redirect 组件，只渲染出第一个与浏览器访问地址匹配的 <Route> 或 <Redirect>
• 用途：渲染单个组件、重定向、404页面

3 导航

3.1 声明式导航

利用组件 Link 或 NavLink 属性实现路由跳转

1. Link

<Link/> 提供声明式 无障碍导航，默认为 a 标签

• to(String)：点击跳转到指定路径

<Link to="/home" />

• to(Object)：携带参数跳转到指定路径

<Link to={{
  pathname: '/pay',
  search: '?id=123456',
  state: { price: 998 }
}} />

• replace：bool
  • 为 true 时，点击链接后将使用新地址替换掉上一次访问的地址

2. NavLink

<NavLink/> 使得导航激活时有高亮

• activeStyle(Object)：导航选中激活时的样式
• to(string|object)
• isActive(func): 决定导航是否激活, 或者在导航激活时候做点别的事情
  • 它不能决定对应页面是否可以渲染

3.2 编程式导航

利用路由提供的 history 对象实现路由跳转

• history.push( path | object)
• history.replace( path | object)

1. 如何获取 history 对象？

1. 利用 <Route/> 渲染的组件，history 自动写入组件的 props 属性，可通过 props.history 获取

main.js

<Route component={App}/>

App.js

goto(path){
  let { history } = this.props;
  console.log(this.props);
  history.push(path);
}

2. WithRouter 高阶组件（推荐）

• 利用 withRouter 高阶组件包装后，直接通过组件的 props.history 获取，就可以使用编程式导航进行点击跳转

3.3 路由的 enter leave

• 使用 componentDidMount 或 componentWillMount 来代替 onEnter
• 使用 componentDidUpdate 或 componentWillUpdate 来代替 onUpdate
• 使用 componentWillUnmount 来代替 onLeave

4 动态路由

在匹配路径 path 的后面加上冒号 + 参数， 如 path ="goods/:id"

获取动态id方式

• 当通过 <Route/> 渲染组件时，路由会给我们组件注入3个参数 -- history, location, match，通过 match.params 获取动态路由参数

5 嵌套路由

props.match 是实现嵌套路由的对象，当我们在某个页面跳转到它的下一级子页面时，我们不会显显性地写出当前页面的路由，而是用 match 对象的 path 和 url 属性

• match.path：是指写在 <Route/> 中的 path 参数
• match.url：是指在浏览器中显示的真实 URL

match.path 可用于嵌套组件中的 <Route/>
match.url 可用于嵌套组件中的 <NavLink/>

  <div className="subnav">
    <NavLink to={props.match.url + "/computer"} activeClassName="active">电脑</NavLink>
    <NavLink to={props.match.url + "/pad"} activeClassName="active">平板</NavLink>
    <NavLink to={props.match.url + "/acc"} activeClassName="active">配件</NavLink>
  </div>

  <Switch>
    <Redirect from={props.match.path} to={props.match.path + "/computer"} exact />
    <Route path={props.match.path + "/pad"} component={Pad}/>
    <Route path={props.match.path + "/acc"} component={Acc}/>
  </Switch>