zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    poj 3666 Making the Grade
    poj 3186 Treats for the Cows (区间dp)
    hdu 1074 Doing Homework(状压)
    CodeForces 489C Given Length and Sum of Digits...
    CodeForces 163A Substring and Subsequence
    CodeForces 366C Dima and Salad
    CodeForces 180C Letter
    CodeForces
    hdu 2859 Phalanx
    socket接收大数据流
  • 原文地址:https://www.cnblogs.com/lliuhh/p/9969197.html
Copyright © 2011-2022 走看看