Reactでのルーティングの使い方を詳しく解説

今回はReactでのルーティングの使い方について詳しく解説します。 Reactでルーティングを使用する際の注意点は何ですか？実際の事例を見てみましょう。

Routing

は、URLを対応する関数にマッピングすることで実装されます。 Reactルーティングを使用するには、最初にreact-router.jsを導入する必要があります。
注:
React-router バージョン 4.0 以降は、バージョン 3.0 以下とは大きく異なります。このチュートリアルではバージョン 3.0.2 を使用し、バージョン 4.0 以降のチュートリアルは後で更新されます。
npm を使用してインストールする場合、デフォルトで最新バージョンがインストールされます。インストールされたバージョンが最新で、バージョン 3.0 を使用すると、エラーが報告されます。
そのため、npm をインストールするときは、バージョン npm install reverse-router@3.0.2 --save-dev を指定する必要があります。 npm install react-router@3.0.2 --save-dev。

路由背景-SPA

传统的前端基本都是通过页面之间跳转来实现各功能模块的切换，这种做法会导致一个项目下来存在大量的 html 页面，而且每个页面都有一大堆的静态资源文件需要引入，在性能一直被垢病。后来有了随着 ajax 的普及，还有 jQuery 对 ajax 的封装后的便捷使用，开发者会大量的使用 ajax 来加载一个 html 页面到当前页面的某个容器当中来实现无刷新加载，但依然没有解决大量存在 html 页面和每个页面加载大量的静态资源文件而导致性能上的问题。随着移动互联网的普及，移动端对页面加载的性能要求和流量的限制越来越高，所以主流的前端框架都往 SPA 方向靠齐。
SPA，Single Page Application 的缩写，单页面应用，其目的是整个应用程序只有一个 html 页面，结合构建 webpack 的统一打包思想，把所有静态资源文件打包成一个 js 文件，在唯一的一个 html　页面引用，从而真正意义上实现一个 html 文件，一个 js 文件完成一个应用的构想。
SPA 优化了静态加载的性能，但一个应用程序还是有很多的功能模块，功能模块之间的切换，就变成了组件之间的切换，所以到目前为止基本上主流的前端框架都会有路由和组件两个概念，而且实现思想都是一致的。

路由引用与使用

//es5
var {Router, Route, hashHistory, Link, IndexRoute, browserHistory} = require("react-router");

//es6
import {Router, Route, hashHistory, Link, IndexRoute, browserHistory} from 'react-router';

//es5 和 es6 的使用都是一样的
<Link to="/">Root</Link>
<Router>
    <Route path=&#39;/&#39; component={RootComponent}/>
</Router>

//使用 `<script>` 标签 
<script src="../js/ReactRouter.js"></script>
<ReactRouter.Link to="/">Root</ReactRouter.Link>
<ReactRouter.Router>
    <ReactRouter.Route path=&#39;/&#39; component={RootComponent}/>
</ReactRouter.Router>

路由组件与属性

Link

• 用于路由之间跳转，功能等同于 a 标签。

• 属性 to 等同于 a 标签的 href。

• <Link to="/page">page</Link>，作用等同于 <a href="#/page">page</a>。

Router

• 是最外层的路由组件，整个 Application 仅一个。

• 属性 history 有两个属性值：

• hashHistory 路由将通过URL的hash部分（#）切换，推荐使用。

• <Router history={hashHistory}> 对应的 URL 形式类似 example.com/#/some/path

• browserHistory 这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误。

• <Router history={browserHistory}> 对应的 URL 形式类似 example.com/some/path。

Route 组件的属性

• Route 是组件 Router 子组件，可以通过嵌套 route 来实现路由嵌套。

• 属性 path：指定路由的匹配规则，这个属性是可以省略的，这样的话，不管路径是否匹配，总是会加载指定组件。

• 属性 component：指当 URL 映射到路由的匹配规则时会渲染对应的组件。

• <Route path="/" component={RootComponent}/> 当 URL 为 example.com/#/ 时会渲染组件 RootComponent

• <Route path="/page1" component={Page1Component}/> 当 URL 为 example.com/#/page1 时会渲染组件 Page1Component

基本用法

import React from 'react'
import ReactDOM from 'react-dom'
import {Router, hashHistory, browserHistory} from 'react-router'

const html = (
    <ul>
        <li><Link to="/">Root</Link></li>
        <li><Link to="/page">page</Link></li>
    </ul>
)

class RootComponent extends React.Component{
    render(){
        return (
            <p>
                <h1>RootComponent</h1>
                {html}
            </p>
        )       
    }
}

class PageComponent extends React.Component{
    render(){
        return (
            <p>
                <h1>PageComponent</h1>
                {html}
            </p>
        )       
    }
}

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path=&#39;/&#39; component={RootComponent}/>
        <Route path=&#39;/page&#39; component={PageComponent}/>
    </Router>,
    document.getElementById('app')
)

效果预览

路由参数

• 路由的参数传递是通过 Route 组件的 path 属性来指定的。

• 参数值可通过 this.props.params.paramName 来获取。

• :paramName

• 匹配URL的一个部分，直到遇到下一个/、?、#为止。

• <Route path="/user/:name"> 。

• 匹配 URL：/#/user/sam，参数 sam 为必须存在。

• this.props.params.name

  バックグラウンド SPA のルーティング🎜🎜 従来のフロントエンドは基本的に、ページ間をジャンプすることで機能モジュールを切り替えます。このアプローチでは、プロジェクト内に多数の HTML ページが存在し、各ページには多数の静的リソース ファイルが含まれます。導入する必要がありますが、これは常にパフォーマンスに問題がありました。その後、ajax の人気と jQuery による ajax のカプセル化の便利な使用により、開発者は ajax を広範囲に使用して HTML ページを現在のページのコンテナにロードし、非リフレッシュ読み込みを実現するようになりますが、パフォーマンスの問題はまだ解決されていません。これは、多数の HTML ページが存在し、各ページに多数の静的リソース ファイルが読み込まれることが原因で発生します。モバイル インターネットの普及に伴い、モバイル端末のパフォーマンス要件とページ読み込み時のトラフィック制限がますます厳しくなっているため、主流のフロントエンド フレームワークは SPA に移行しています。 🎜SPA、Single Page Application、シングルページアプリケーションの略で、その目的は、アプリケーション全体が 1 つの HTML ページのみを持つことと、Webpack を構築するという統一されたパッケージ化のアイデアを組み合わせて、すべての静的リソースファイルを 1 つの js ファイルにパッケージ化することです。唯一の HTML ページで参照されるため、HTML ファイルと JS ファイルでアプリケーションが完成するという考えが真に実現されます。 🎜SPA は静的読み込みのパフォーマンスを最適化しますが、アプリケーションには依然として多くの機能モジュールがあり、機能モジュール間の切り替えはコンポーネント間の切り替えになるため、これまでのところ、基本的に主流のフロントエンド フレームワークにはルーティングがあり、コンポーネントとコンポーネントには 2 つの概念があります。実装のアイデアは同じです。 🎜🎜ルートの参照と使用法🎜

  import React from 'react'
  import ReactDOM from 'react-dom'
  import {Router, hashHistory, browserHistory} from 'react-router'
  
  class UserComponent extends React.Component{
      render(){
          return (
              <p>
                  <h3>UserComponent 单个参数 </h3>
                  <p>路由规则：path='/user/:username'</p>
                  <p>URL 映射：{this.props.location.pathname}</p>
                  <p>username：{this.props.params.username}</p>
              </p>
          )       
      }
  }
  ReactDOM.render(
      <Router history={hashHistory}>
          <Route path=&#39;/user/:username&#39; component={UserComponent}/>
      </Router>,
      document.getElementById('app')
  )

  🎜ルートのコンポーネントと属性🎜

  Link

  • 🎜 はルート間をジャンプするために使用され、関数は以下と同等です タグ。 🎜
  • 🎜 属性 to は、a タグの href と同等です。 🎜
  • 🎜<Link to="/page">page</Link>、関数は <a href="#/page" と同等です。 "&gt ;ページ</a>。 🎜

  Router

  • 🎜 は最も外側のルーティング コンポーネントであり、アプリケーション全体に 1 つだけ存在します。 🎜
  • 🎜属性 history には 2 つの属性値があります: 🎜
  • 🎜hashHistory URL のハッシュ部分 (#) によってルートが切り替わります。これを推奨します。 🎜
  • 🎜<Routerhistory={hashHistory}> 対応する URL 形式は example.com/#/some/path に似ています🎜
  • 🎜browserHistory この状況ではサーバーの変更が必要です。そうしないと、ユーザーがサーバーに特定のサブルートを直接リクエストし、Web ページが見つからないという 404 エラーが表示されます。 🎜
  • 🎜<Routerhistory={browserHistory}> 対応する URL 形式は、example.com/some/path に似ています。 🎜

  ルート コンポーネントのプロパティ

  • 🎜ルート は、コンポーネント Router サブコンポーネントは、route をネストすることでルートのネストを実現できます。 🎜
  • 🎜属性 path: ルートの一致ルールを指定します。この属性は省略可能です。この場合、パスが一致するかどうかに関係なく、指定されたコンポーネントが常にロードされます。か否か。 🎜
  • 🎜属性 component: URL がルートの一致ルールにマップされるときにレンダリングされる対応するコンポーネントを参照します。 🎜
  • 🎜<Route path="/"component={RootComponent}/> URL が example.com/#/ の場合、コンポーネント RootComponent がレンダリングされます🎜
  • 🎜<Route path="/page1"component={Page1Component}/> URL が example.com/#/page1 の場合、コンポーネント Page1Component🎜 li>🎜基本的な使用法🎜

    import React from 'react'
    import ReactDOM from 'react-dom'
    import {Router, hashHistory, browserHistory} from 'react-router'
    
    class UserComponent extends React.Component{
        render(){
            return (
                <p>
                    <h3>OrderComponent 可选参数 </h3>
                    <p>路由规则：path='/order(/:orderid)'</p>
                    <p>URL 映射：{this.props.location.pathname}</p>
                    <p>orderid：{this.props.params.orderid}</p>
                </p>
            )       
        }
    }
    ReactDOM.render(
        <Router history={hashHistory}>
            <ReactRouter.Route path=&#39;/order(/:orderid)&#39; component={UserComponent}/>
        </Router>,
        document.getElementById('app')
    )

    🎜エフェクトプレビュー🎜🎜ルーティングパラメータ🎜
    • 🎜ルーティングのパラメータ転送は、Routeコンポーネントのpath属性を通じて指定されます。 🎜
    • 🎜パラメータ値は、this.props.params.paramName を通じて取得できます。 🎜
    • 🎜:paramName🎜
    • 🎜 次の /、?、# に遭遇するまで URL の一部と一致します。 🎜
    • 🎜<ルートパス="/user/:name"> 。 🎜
    • 🎜一致 URL: /#/user/sam、パラメータ sam が存在する必要があります。 🎜
    • 🎜this.props.params.name の値は sam です。 🎜

    import React from 'react'
    import ReactDOM from 'react-dom'
    import {Router, hashHistory, browserHistory} from 'react-router'
    
    class UserComponent extends React.Component{
        render(){
            return (
                <p>
                    <h3>UserComponent 单个参数 </h3>
                    <p>路由规则：path='/user/:username'</p>
                    <p>URL 映射：{this.props.location.pathname}</p>
                    <p>username：{this.props.params.username}</p>
                </p>
            )       
        }
    }
    ReactDOM.render(
        <Router history={hashHistory}>
            <Route path=&#39;/user/:username&#39; component={UserComponent}/>
        </Router>,
        document.getElementById('app')
    )

    • (:paramName)

    • 表示URL的这个部分是可选的。

    • <Route path="/order(/:orderid)"> 。

    • 匹配 URL：/#/order，this.props.params.orderid 获取的值为 undefined。

    • 匹配 URL：/#/order/001，this.props.params.orderid获取参数的值为 001。

    import React from 'react'
    import ReactDOM from 'react-dom'
    import {Router, hashHistory, browserHistory} from 'react-router'
    
    class UserComponent extends React.Component{
        render(){
            return (
                <p>
                    <h3>OrderComponent 可选参数 </h3>
                    <p>路由规则：path='/order(/:orderid)'</p>
                    <p>URL 映射：{this.props.location.pathname}</p>
                    <p>orderid：{this.props.params.orderid}</p>
                </p>
            )       
        }
    }
    ReactDOM.render(
        <Router history={hashHistory}>
            <ReactRouter.Route path=&#39;/order(/:orderid)&#39; component={UserComponent}/>
        </Router>,
        document.getElementById('app')
    )

    • *.*

    • 匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。

    • <Route path="/all1/*.*"> 。

    • this.props.params 获取的参数为一个固定的对象： {splat: [*, *]}。

    • 匹配 URL：/all1/001.jpg，参数为 {splat: ['001', 'jpg']}。

    • 匹配 URL：/all1/001.html，参数为 {splat: ['001', 'html']}。

    • *

    • 匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。

    • <Route path="/all2/*">。

    • this.props.params 获取的参数为一个固定的对象： {splat: '*'}。

    • 匹配 URL：/all2/，参数为 {splat: ''}。

    • 匹配 URL：/all2/a，参数为 {splat: 'a'}。

    • 匹配 URL：/all2/a/b，参数为 {splat: 'a/b'}。

    • **

    • 匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。

    • <Route path="/**/*.jpg">

    • this.props.params 获取的参数为一个固定的对象： {splat: [**, *]}。

    • 匹配 URL：/all3/a/001.jpg，参数为 {splat: ['a', '001']}。

    • 匹配 URL：/all3/a/b/001.jpg，参数为 {splat: ['a/b', '001']}。

    效果预览

    IndexRoute

    当访问一个嵌套路由时，指定默认显示的组件

    AppComponent.js

    import React from 'react'
    
    export default class AppComponent extends React.Component{
        render(){
            return <p>{this.props.children}</p>
        }
    }

    LoginComponent.js

    import React, {Component} from 'react'
    
    export default class LoginComponent extends Component{
        login(){}
        render(){
            return <h1>Login</h1>
        }
    }

    HomeComponent.js

    import React, {Component} from 'react'
    
    export default class HomeComponent extends Component{
        login(){}
        render(){
            return <h1>Home</h1>
        }
    }

    Router.js

    import React from 'react'
    import {Route, IndexRoute} from 'react-router'
    
    import AppComponent from '../components/app/app'
    import HomeComponent from '../components/home/home'
    import LoginComponent from '../components/login/login'
    
    const routes = (
        <Route path="/" component={AppComponent}>
            <IndexRoute component={HomeComponent} />
            <Route path="login" component={LoginComponent} />
            <Route path="home" component={HomeComponent} />
        </Route>
    )
    
    export default routes;

    • 如果没有加IndexRoute，则在访问 http://localhost/#/ 时页面是空白的

    • 访问 http://localhost/#/login 才会显示内容

    • 加上 IndexRoute，在访问http://localhost/#/时会默认渲染HomeComponent

    模块化

    可利用组件Router的属性routes来实现组件模块化

    router.js

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    import {Route, Router, IndexRoute, hashHistory} from 'react-router'
    
    import AppComponent from '../components/app/app'
    import HomeComponent from '../components/home/home'
    import LoginComponent from '../components/login/login'
    
    const routes = (
        <Route path="/" component={AppComponent}>
            <IndexRoute component={HomeComponent} />
            <Route path="login" component={LoginComponent} />
            <Route path="home" component={HomeComponent} />
        </Route>
    )
    
    ReactDOM.render(
        <Router history={hashHistory} routes={routes} />,
        document.getElementById('app')
    )

    编程式导航

    • 普通跳转 this.props.router.push('/home/cnode')

    • 带参数跳转this.props.router.push({pathname: '/home/cnode', query: {name: 'tom'}})

    路由钩子函数

    每个路由都有enter和leave两个钩子函数，分别代表用户进入时和离开时触发。

    onEnter

    进入路由/home前会先触发onEnter方法，如果已登录，则直接next()正常进入目标路由，否则就先修改目标路径replace({ pathname: 'login' })，再next()跳转。

    let isLogin = (nextState, replace, next) => {
        if(window.localStorage.getItem('auth') == 'admin'){
            next()
        } else {
            replace({ pathname: 'login' })
            next();
        }
        
    }
    const routes = (
        <Route path="/" component={AppComponent}>
            <Route path="login" component={LoginComponent} />
            <Route path="home" component={HomeComponent} onEnter={isLogin}/>
        </Route>
    )

    onLeave

    对应的setRouteLeaveHook方法，如果return true则正常离开，否则则还是停留在原路由

    import React from 'react'
    import {Link} from 'react-router'
    
    export default class Component1 extends React.Component{
        componentDidMount(){
            this.props.router.setRouteLeaveHook(
                this.props.route,
                this.routerWillLeave
            )
        }
        routerWillLeave(){
            return '确认要离开？'
        }
        render(){
            return (
                <p>
                    <Link to="/login">Login</Ling>
                </p>
            )
        }
    }

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

    推荐阅读：

    PromiseA+的实现步骤详解
    

    react实现选中li高亮步骤详解
    

以上がReactでのルーティングの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。