初学react之路由

一、最近学习了react的路由，那么我就记个笔记吧！大家也可以looK一下

平常我们用到的路由一般有browserHistory和hashHistory，这两个路由模式的区别一会儿再说，我们现在就单纯说用法。
import React from "react"; 
// 引入路由
import { HashRouter, Route, Link,switch } from "react-router-dom";
// 引入组件
import Home from './components/Home' 
import Movie from './components/Movie' 
import About from './components/About' 
class App extends React.Component {
render() { 
　　return (  
  <HashRouter> 　　
  <div> 
  <h1>组件路由</h1> 
　　　{/* 路由链接组件 */} 
　　　<Link to="/home">首页</Link>   
　　　<Link to="/movie">电影</Link>  
 　　 <Link to="/about">关于</Link>
 　　 <hr></hr>
    <switch>
 　　　　{/* 新增一个重定向的路由规则 */} 
　　　<Route path="/home" component={Home} ></Route>
 　　 <Route path="/movie" component={Movie} ></Route> 
　　　<Route path="/about" component={About} ></Route>
 　　</div> 
   </switch>
  </HashRouter> ); 
 } 
}export default App;

首先我们需要在最外层包裹browserHistory或者hashHistory，然后使用Link标签，这个相当于a标签这样子，接着我们得定义一下路由匹配规则。我们先包裹一个switch便签，为何要用这个标签呢！这个标签的用处就是用于匹配路由并且做一些限制，让路由能够准确地匹配到你想要的，以免出现一些意外，接着来个Route标签，定义path，然后匹配路由组件component,这样子就能实现路由的匹配了。

关于browserHistory和hashHistory的区别呢！hashHistory的path会有一个#号，它的兼容性较browserHistory要好，因为hashHistory是通过hash值去匹配路由的，#后面跟着的path它是不管的，但是browserHistory是根据你的path来匹配的，它需要服务端的支持，当你服务端没有做路由配置的时候，用户刷新页面会导致一些引用的东西丢失，但是hashHistory就不会了。