一、什么是前端路由

在我看来，前端路由和网络上的路由器功能很像。前端路由也是进行分发操作，只不过其分发的是页面跳转请求。

二、使用

一般在最上层组件中使用前端路由。

// ...
import { Route, BrowserRouter } from 'react-router-dom'
class App extends Component{
  render(){
    return (
      <Provider store={store}>
        {//...}
        <BrowserRouter>
          <Route path='/' component={Home}></Route>
        </BrowserRouter>
      </Provider>
    )
  }
}

上面代码Route中的path就是请求的路径，在浏览器输入项目根路径，即可进入Home组件定义的页面。

path特性是使用正则表达式进行匹配的，所以，上面请求，/details也会跳转到Home页面。

如果需要路径完全相同时才匹配，比如请求路径/details不能匹配/，只能匹配/details，则需要添加exact特性。

<Route path='/' component={Home}></Route>

上面代码只有请求路径为/才起作用。
在页面跳转时，常常涉及页面传参的问题。

• 方式一

  • 路由设置

  <Route path='/detail/:id' exact component={Detail}></Route>
  

  上面代码表示在请求路径/detail/id时，传递参数id

  • 跳转请求设置

   import { Link } from 'react-router-dom';
   <Link to = "detail/1"></Link>
  

  上面代码请求detail/1路径，匹配路由后，id等于1

  • 获取参数

  this.props.match.params.id
  

  上面代码存在Detail组件中，用于获取路由参数

• 方式二

  • 路由设置

  <Route path='/detail' component={Detail}></Route>
  

  • 请求设置

  import { Link } from 'react-router-dom';
  <Link to = "/detail?id=1" ></Link>
  

  • 获取参数

  this.props.location.search
  

  上面代码存在Detail组件中，获取路由参数。不同方式一的是，这里获取的值为?id=1，所以，需要进行字符串的分割。