react-router

安装:

npm install --save react-router

注意:如果您正在编写将在浏览器中运行的应用程序,则应该安装react-router-dom,同样,如果您正在编写ReactNative应用程序,则应该安装react-router-native

React-router 

React-router提供一些router的核心api,包括Router,Route,Switch等,但是没有提供dom操作进行跳转的api

 

React-router-dom

React-router-dom 提供了BrowserRouter ,Route ,Link 等api,我们通过dom的事件控制路由 。例如点击一个按钮进行跳转,所以我们跟需要react-router-dom 安装简单 

npm install react-router-dom --save

react-router-dom 的核心用法

 

HashRouter 和BrowserRouter

它们两个是路由的基本,我们需要将它们包裹在最外层,我们只要选择其中的一个就可以。
HashRouter

  如果你使用过react-router2或3或者vue-router,你经常会发现一个现象就是url中会有个#,例如:localhost:3000/# ,HashRouter就会出现这种情况,它是通过hash值来对路径进行控制的,如:HashRouter,你的路由就会默认有# 代码如下:

 

import React from 'react';
import ReactDOM from 'react-dom';
//import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter , HashRouter , Route} from 'react-router-dom';


function home (){
  return <h2>Home Page</h2>      
}
ReactDOM.render (
   <HashRouter>
         <Route path ='/' component = {home} ></Route>
    </HashRouter>  ,document.getElementById('root'); 
)    
//registerServiceWorker();

BrowserRouter 
很多情况下我们不需要这个#,这时我们就需要BrowserRouter

 <BrowserRouter>
         <Route path ='/' component = {home} ></Route>
    </BrowserRouter>  ,document.getElementById('root'); 

它的原理是使用HTML5 history API(pushState ,replaceState,popState)来使你的内容随着url动态改变的。

如果你的文件是放在服务器的二级目录下则可以使用它。

<BrowserRouter basename='/calendar'>
         <Route path ='/' component = {home} ></Route>
    </BrowserRouter>  ,document.getElementById('root'); 

Router

Router是路由的一个原材料,它控制路径嘴硬显示的组件。我们经常是exact,path 以及component属性。

exact 控制匹配到路径时不会再继续向下匹配 ,path 标识路由的路径 ,component表示路径对应显示的组件。

Link和NavLink的选择 
两者都是可以控制路由跳转的,不同点是NavLink的api更多 。

Link 主要api是to,to可以接受string或者一个object,来控制url,使用方法如下

<Link to = '/courses' />





<Link to ={{
    pathname :'/courses',
    search:'?sort =name',
    hash:'#the-hash',
    state:{fromDashboard:true}
}} />

NavLink

<NavLink exact activeClassName='selected' to='/second/1234'>second</NavLink>

exact 用于严格匹配 ,匹配到/则不会继续向下匹配 ,to 则是控制跳转的路径,activeClassName是选中状态的类名, 我们在/second后面

添加1234来想路由中传递消息,这结合了/second/:id。

 

参考文献:http://react-china.org/t/react-router4/15843

posted @ 2018-11-16 14:36  ........lhh  阅读(180)  评论(0编辑  收藏  举报