登录  /  注册
首页 > web前端 > js教程 > 正文

React-router v4使用步骤详解

php中世界最好的语言
发布: 2018-05-24 10:55:41
原创
1692人浏览过

这次给大家带来React-router v4使用步骤详解,React-router v4使用的注意事项有哪些,下面就是实战案例,一起来看一下。

也许学习react-router最好的办法就是用react-router-dom v4来写一个多页的react应用。这个react应用会包含登录、注册、首页、联系人等页面。但是,首先让我们来看一下react router v4的概念,以及它与v3有什么不同的地方。

React router v4 vs v3

v4是react router的一次重写,所以和v3有很多不同的地方。主要有:

  • 在react router v4里,路由不再是集中在一起的。它成了应用布局、UI的一部分。

  • 浏览器用的router在react-router-dom里。所以,浏览器里使用的时候只需要import react-router-dom就可以。

  • 新的概念BrowerRouterHashRouter。他们各自服务于不同的情景下。详见下文。

  • 不在使用{props.children}来处理嵌套的路由。

  • v4的路由默认不再排他,会有多个匹配。而v3是默认排他的,只会有一个匹配被使用。

react-router-dom是react-router中用于浏览器的。react-router被分为一下几部分:

  • react-router是浏览器和原生应用的通用部分。

  • react-router-dom是用于浏览器的。

  • react-router-native是用于原生应用的。

React-router vs react-router-dom vs react-router-native

react-router是核心部分。react-router-dom提供了浏览器使用需要的定制组件。react-router-native则专门提供了在原生移动应用中需要用到的部分。所以,如果在本例中实现浏览器开发就只需要安装react-router-dom

安装

如上所说,我们使用react开发web应用,所以只需要安装react-router-dom

  npm install react-router-dom --save
登录后复制

理解和使用react-router

  • BrowserRouter,这是对Router接口的实现。使得页面和浏览器的history保持一致。如:window.location

  • HashRouter,和上面的一样,只是使用的是url的hash部分,比如:window.location.hash

  • MemoryRouter

  • NativeRouter,处理react native内的路由。

  • <a href="http://www.php.cn/wiki/188.html" target="_blank">Static</a>Router,处理静态路由,和v3一样。

BrowserRouter vs HashRouter

在react-router的各种router中,<browserrouter></browserrouter><hashrouter></hashrouter>是可以在浏览器中使用的。如果你使用的是一个非静态的站点、要处理各种不同的url那么你就需要使用BrowserRouter。相反的如果你的server只处理静态的url,那么就使用HashRouter

理解和使用Route

组件是react router v4里最有用的组件。背后的使用哲学也很简单,无论何时你需要在匹配某个路径的时候绘制一个组件,那么就可以使用Route组件。

Route组件可以使用如下的属性:

  • path属性,字符串类型,它的值就是用来匹配url的。

  • component属性,它的值是一个组件。在path匹配成功之后会绘制这个组件。

  • exact属性,这个属性用来指明这个路由是不是排他的匹配。

  • strict属性,  这个属性指明路径只匹配以斜线结尾的路径。

还有其他的一些属性,可以用来代替component属性。

  • render属性,一个返回React组件的方法。传说中的rencer-prop就是从这里来的。

  • children属性,返回一个React组件的方法。只不过这个总是会绘制,即使没有匹配的路径的时候。

多数的时候是用component属性就可以满足。但是,某些情况下你不得不使用renderchildren属性。

  • match

  • location

  • history

如:
使用组件:

&lt;route&gt;&lt;/route&gt;
登录后复制
登录后复制

使用render属性实现内联绘制:

<route><p>homepage</p>} /&gt;</route>
登录后复制

来看哥更复杂的:

const FadingRoute = ({ component, ...rest }) =&gt; (
  <route> (
    <fadein>
      <componnet></componnet>
    </fadein>
  )} /&gt;
)
<fadingroute></fadingroute></route>
登录后复制

使用children

登录后复制
         
const ListItemLink = ({to, ...rest}) => (    (     
  •       <link>     
  •   )} /> )

    更多关于react-router v4如何匹配路径的内容,请移步这里。

    URL / Path / Route的参数

    通常情况下,我们都会在路径里添加参数。这样方便在不同的组件之间传递一些必要的数据。那么我们如何才能获取到这些传递的参数,并传递给组件中呢?我们只需要在路径的最后加上/:param。如:

    &lt;route&gt;&lt;/route&gt;
    const homepage = ({match}) => (
      

        

     parameter => {match.params.param1}    );

    登录后复制

    一旦有路径可以匹配成功,那么就会穿件一个拥有如下属性的对象,并传入绘制的组件里:

    • url: 匹配的url。

    • path:就是path。

    • isExact:如果path和当前的widnow.location的path部分完全相同的话。

    • params:在URL里包含的参数。

    理解并使用Link

    Link是react router v4特有的一个组件。是用来代替上一版的anchor link。使用Link可以在React应用的不同页面之间跳转。与unclor会重新加载整个页面不同,Link只会重新加载页面里和当前url可以匹配的部分。

    Link组件需要用到to属性,这个属性的值就是react router要跳转到的地址。如:

    import { Link } from 'react-router-dom';
    const Nav = () =&gt; (
      <link>Home
    );
    登录后复制

    当被点击的时候,会跳转到路径:/

    to属性的值可以是一个字符串,也可以是一个location(pathname, hash, state和search)对象。比如:

    <link>
    登录后复制

    Link也可以使用replace属性,如果点击的话,那么history里的当前领会被replace。

    <link>和

    NavLinkLink的一个子类,在Link组件的基础上增加了绘制组件的样式,比如:

    <navlink>
      My Profile
    </navlink>
    登录后复制

    使用react router dom实现你的第一个demo

    现在我们用react router dom来实现第一个demo。

    首先,引入必要的组件。比如:RouteBrowserRouter

    import { BrowserRouter, Route } from 'react-router-dom';
    登录后复制

    接下来,我们创建一些组件和一些Html标签。同时我们用react router v4里的LinkNavLink组件。

    const BaseLayout = () => (
      

        

          

    React Router v4 Browser Example

               
        

          &lt;route&gt;&lt;/route&gt;       &lt;route&gt;&lt;/route&gt;       &lt;route&gt;&lt;/route&gt;       &lt;route&gt;&lt;/route&gt;       &lt;route&gt;&lt;/route&gt;       &lt;route&gt;&lt;/route&gt;     

        
          React Router v4 Browser Example (c) 2017     
       );
    登录后复制

    然后我们来创建需要的组件:

    const homepage = () =&gt; <p>This is a Home Page</p>
    const LoginPage = () =&gt; <p>This is a Login Page</p>
    const RegisterPage = () =&gt; <p>This is a Register Page</p>
    const ProfilePage = () =&gt; <p>This is a Profile Page</p>
    const AboutPage = () =&gt; <p>This is a About Page</p>
    const ContactPage = () =&gt; <p>This is a Contact Page</p>
    登录后复制

    最后,写App组件。

    const App = () =&gt; (
      <browserrouter>
        <baselayout></baselayout>
      </browserrouter>
    )
    render(<app></app>, document.getElementById('root'));
    登录后复制

    如你所见,react router v4的组件还非常的易用的。

    理解和使用非排他的路由

    在上例中,我们在homepage组件的路由里使用了属性exact

    &lt;route&gt;&lt;/route&gt;
    登录后复制
    登录后复制

    这是因为v4中的路由默认都是非排他的,这一点和v3的实现思路截然不同。如果没有exact属性,homepage组件和其他的组件就会同事绘制在页面上。

    如,当用户点了登录连接以后,"/""/login"都满足匹配条件,对应的登录组件和Home组件就会同时出现在界面上。但是,这不是我们期待的结果,所以我们要给"/"path加上exact属性。

    现在我们来看看非排他的路由有什么优点。假如我们有一个子菜单组件需要显示在profile页面出现的时候也出现。我们可以简单的修改BasicLayout来实现。

    const BaseLayout = () =>  (
      

        

          

    React Router v4 Browser Example

               
      

    );
    登录后复制

    这样我们就会看到对应于"/me"路径的组件都绘制出来了。这就是非排他路由的好处。

    理解排他路由

    排他路由是react router v3的默认实现。只有第一个匹配的路由对应的组件会被绘制。这一点也可以用react router v4的Switch组件来实现。在Switch组件中,只有第一个匹配的路由&lt;route&gt;&lt;/route&gt;或者&lt;redirect&gt;&lt;/redirect&gt;会被绘制:

    import { Switch, Route } from 'react-router';
    
      &lt;route&gt;&lt;/route&gt;
      &lt;route&gt;&lt;/route&gt;
      &lt;route&gt;&lt;/route&gt;
      &lt;route&gt;&lt;/route&gt;
    登录后复制

    浏览器历史

    react router v4中,提供了一个history对象。这个对象包含了多个api,可以用来操作浏览器历史等。

    你也可以在React应用里使用history对象的方法:

    history.push("/my-path")
    history.replace("/my-path")
    登录后复制

    用另外的方法可以写成:

    <link>&lt;redirect&gt;&lt;/redirect&gt;
    登录后复制

    使用组件实现重定向

    无论何时你要重定向到另外一个地址的时候,都可以使用Redirect组件:

    &lt;redirect&gt;&lt;/redirect&gt;
    登录后复制
    登录后复制

    或者,更为简单的:

    &lt;redirect&gt;&lt;/redirect&gt;
    登录后复制
    登录后复制

    最后

    react router v4让开发react应用变得更加的简单。让react应用内的页面跳转更加简单。你只需要声明一个BrowserRouter或者HashRouter,然后在它的内部放上一系列的Route组件,这些主键只要包含pathcomponent属性。无论何时有了匹配的路由,那么它就会进行非排他的绘制(所有匹配的路由都会绘制)。你也可以把Route放在Switch组件里来实现排他的绘制(只有第一个匹配的路由会被绘制)。你可以在路径中传递参数,match对象会保留这些参数。最后,所有在web中使用的路由组件都包含在react-router-dom中。只需要引入react-router-dom就可以使用。

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    Chart.js 轻量级HTML5图表绘制工具库使用步骤详解

    Chart.js轻量级图表库使用案例解析

    以上就是React-router v4使用步骤详解的详细内容,更多请关注php中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号