React基础6：React-router基础入门

一、安装和导入

1、安装

npm install react-router-dom —save

react-router——路由核心功能
react-router-dom——基于react-router，加入了一些在浏览器运行下的功能

2、基本用法：

import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDom.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

3、两种方式：

（1）BrowserRouter：基于history对象进行路由控制
地址：http://www.abc.com/article/a1
（2）hashRouter：使用锚点技术，在url中加#作为路由，推荐使用。
地址：http://www.abc.com/#/article/a1

二、Route匹配的三种方式

1、Route组件：

（1）定义了匹配方式——比较path属性和当前地址的pathname。当url匹配成功时渲染响应组件内容，不匹配就渲染null。

import React from 'react';
import { Route } from 'react-router-dom';
class App extends Component {
  render(){
    return (
      <div>
        <Route path="/products" component={Products} />
        <Route path="/admin" component={Admin} />
        <Route path="/" component={Home} />
      </div>
    )
  }
}

但是这样，home组件会被渲染到所有页面上。怎么解决呢？
有两个办法，一是使用exact标记进行完全匹配，<Route path="/" exact component={Home} />；二是使用Switch。

2、Switch：

将<Route>组件包裹在<Switch>组件中，Switch会遍历其所有子<Route>元素，并且仅渲染与当前地址匹配的第一个元素。

import React from 'react';
import { Route } from 'react-router-dom';
class App extends Component {
  render(){
    return (
      <Switch>
        <Route path="/products" component={Products} />
        <Route path="/admin" component={Admin} />
        <Route path="/" component={Home} />
      </Switch>
    )
  }
}

3、Link：

使用<Link>作为url的导航，让整个应用在不同网址间切换并且不刷新页面。
操作方法：引入Link组件，将a改为Link，属性href改为to。

import React from 'react';
import { Link } from 'react-router-dom';
const NavBar = ()=>{
  return (
    <ul>
      <li>
          <Link to="/">Home</Link>
      </li>
      <li>
          <Link to="/products">Products</Link>
      </li>
    </ul>
  )
};
export default NavBar;

二、react的三个props

※ history对象会使用浏览器的history对象，可以在不同历史记录中导航；
※ location对象代表目前应用的地址，注意其中的pathname属性哦；
※ match对象包含如何去匹配url信息，如isExact，params，path，url等。

1、props传递：
可以通过传入render里面的匿名函数的形式代入对应的组件，并且可以自定义props。
如果要注入默认的history、location、match三个props，可以使用解构的方式。

<Route path="/products" render={(props)=><Products groupId="99" {...props} />}></Route>

2、获取route参数：
使用冒号定义参数，然后传入需要渲染的子组件，在子组件中可以使用this.props.match.params找到对应的参数。

<Route path="/products/:id component={proDetails} />
// proDetail
render(){
  return (
    <div>
      <h1>Product--{this.props.match.params.id}</h1>
    </div>
  )
}

3、重定向功能：
使用redirect组件

<Route path="/not-found" component={NotFound} />
<Redirect to="/not-found" />
// 也可以从某个 重定向到
<Redirect from="mall" to="/products" />

4、导航处理：
history.push或history.replace

import React, {Component} from "react";
class ProDetail extends Component {
  handSave = ()=>{
    this.props.history.push('/products')
  };
  render(){
    return (
      <button onClick={this.handSave}>save</button>
    )
  }
}
export default ProDetail;

总结：

1、使用react-router-dom的第三方库做react路由。react-router-dom依赖于react-router，并且提供了浏览器端的一些方法。

2、browser-router和hash-router的区别：browser-router基于history对象，hash-router基于锚点。

3、route组件：url匹配时渲染响应组件，完全匹配需要使用exact；switch组件可以将route元素包裹起来，仅渲染与当前地址匹配的第一个元素。

4、route props：使用render props方法向子组件传递props，react-router也会自动注入三个props。

5、route参数：在path中定义参数格式，在props match对象中获取参数。

6、Query string：使用第三方插件获得url中的参数，原理是解析url中location的search字段。

7、导航处理：push或replace处理浏览器历史导航。