在React-router4.0中，Routers有两个表现方式 <BrowserRouter> 和 <HashRouter> 这两个标签都将会给你创建一个专门的history对象，BrowserRouter的表现模式需要搭配一个可以响应请求的服务器。HashRouter是静态文件服务器，我们本地开发的时候，建议使用HashRouter。这里需要注意一下，BrowserRouter和 HashRouter标签下面，只允许存在一个标签 具体写法如下
<BrowserRouter> <div> {/*其余内容写在这里面*/} </div> </BrowserRouter> <HashRouter> <div> {/*其余内容写在这里面*/} </div> </HashRouter>
Route
注意，最外层的是Router 这里是 Route 这是我们的路由匹配组件，它有两个 Route和Switch
Route 组件拥有多个属性，这在我们后期的路由传参中将会用到。这里我们需要简单了解几个属性 path component exact strict
path 是我们匹配的地址，当地址匹配的时候 我们才会去渲染 component内的组件内容
path 后面如果书写模式带了 /: 这样的内容，那么这里将会成为占位符 我们可以利用占位符来取到对应路径的参数 使用 this.props.match.params+占位符的名字 即可拿到
exact 属性来规定我们是否严格匹配
strict 则是严格匹配模式 我们规定的路径使用/one/来书写 如果没有完全匹配 /one/ 则不会展示
<Route exact path="/one" component={App} /> // 这里我们加了exact 那么 路径完全等于/one的时候才会渲染App /one/ one /one/two 后面这三种情况均不会渲染App // 相反 如果我们没有加 exact 的时候 /one /one/two App都会被渲染 <Route strict path="/one/" component={App} /> // 我们加了 strict 以后 /one 将不会渲染App 而如果没有 strict 这种情况下 /one 是可以渲染App的
同时React-router给我们提供了一个Switch标签 在这个标签内 我们只会渲染一个Route 并且使第一个符合条件的Route 这是什么意思呢？我们来看代码
<Route path="/about" component={About} /> <Route path="/:User" component={User} /> <Route path="https://www.jb51.net/" component={Home} /> <Route component={NoMatch} />
在这样的路由下 我们匹配/about 会发现 所有的路由都可以匹配到并且渲染了出来，这肯定不是我们想要的结果 于是我们给它嵌套一个 Switch
<Switch> <Route path="/about" component={About} /> <Route path="/:User" component={User} /> <Route path="https://www.jb51.net/" component={Home} /> <Route component={NoMatch} /> </Switch>
这时候我们就只会匹配到第一个/about,仅仅渲染About,大家根据实际需求去决定是否嵌套Switch使用
Link和NavLink
Link 主要api是to，to可以接受string或者一个object，来控制url。我们代码里看看书写方法
<Link to='/one/' /> // 这就是路由到one 搭配Router使用 当然我们可以使用一个对象 <Link to={{ pathname:'/one', search:'?name=qm', hash:'#two', state:{ myName:'qimiao' } }} /> // 这样我们点击link不仅可以到one 还可以传递一些参数
NavLink 它可以为当前选中的路由设置类名、样式以及回调函数等。使用如下
<NavLink exact activeClassName='navLink' to='/one/' /> // 这就是路由到one 搭配Router使用 当然我们可以使用一个对象 <NavLink exact activeClassName='navLink' to={{ pathname:'/one', search:'?name=qm', hash:'#two', state:{ myName:'qimiao' } }} /> // 这里的exact 同样是严格比配模式 同Route // 这样我们可以为当前选中的路由设置样式了
子路由的书写
在react-router4之前的版本，子路由通过路由嵌套就可以实现了，但是这一个方法到了React-router4中就行不通了
先来一个之前的写法，当然也是错误示例
export default class App extends Component { constructor(){ super() this.state={ } } render() { return ( <Router> <div> <h1>App</h1> <ul> <li> <Link to="/home">Home</Link></li> <li><Link to="/children1/">children1</Link></li> <li><Link to="/children2/">children2</Link></li> </ul> <Route path="/home" component={Home} > <Route path="children1" component={Children} /> <Route path="children2" component={ChildrenTwo} /> {/*在4.0以后的版本这样都会报错 那么我们应该怎么写呢*/} </Route> </div> </Router> ) } }
在react-router4.x版本中 我们子路由必须要在子组件内部了