Explication détaillée du routage dans React

Cette fois je vais vous apporter une explication détaillée de l'utilisation du routage dans React Quelles sont les précautions d'utilisation du routage dans React Voici un cas pratique, jetons un oeil. Le

Le routage

est implémenté en mappant l'URL à la fonction correspondante Pour utiliser le routage React, réagissez-router.js doit d'abord être introduit.
Remarque :
Il existe une grande différence entre les versions 4.0 et supérieures de React-Router et 3.0 et inférieures. Ce didacticiel utilise la version 3.0.2, et les didacticiels pour les versions 4.0 et supérieures seront mis à jour ultérieurement.
Lors de l'installation à l'aide de npm, la dernière version est installée par défaut. Si la version installée est la dernière et que vous utilisez la version 3.0, une erreur sera signalée.
Vous devez donc spécifier la version npm install react-router@3.0.2 --save-dev lors de l'installation avec npm.

Routing background-SPA

Le front-end traditionnel bascule essentiellement entre les modules fonctionnels en sautant entre les pages. Cette approche conduira à un grand nombre de pages html dans un projet. contient de nombreux fichiers de ressources statiques qui doivent être importés, ce qui a toujours posé un problème en termes de performances. Plus tard, avec la popularité d'ajax et l'utilisation pratique de l'encapsulation d'ajax par jQuery, les développeurs utiliseront largement ajax pour charger une page HTML dans un conteneur de la page actuelle afin d'obtenir un chargement sans actualisation, mais il n'y a toujours pas de solution aux problèmes de performances. causé par la présence d'un grand nombre de pages html et le chargement d'un grand nombre de fichiers de ressources statiques sur chaque page. Avec la popularité de l'Internet mobile, les terminaux mobiles ont des exigences de performances de plus en plus élevées et des restrictions de trafic lors du chargement des pages, de sorte que les frameworks frontaux grand public évoluent vers SPA.
SPA, l'abréviation de Single Page Application, est une application à page unique. Son objectif est de n'avoir qu'une seule page HTML pour l'ensemble de l'application. Combiné avec l'idée d'empaquetage unifiée de création de webpack, tous les fichiers de ressources statiques sont empaquetés. dans un fichier js, dans la seule page HTML de référence, réalisant ainsi véritablement l'idée d'un fichier html et d'un fichier js complétant une application.
SPA optimise les performances du chargement statique, mais une application comporte toujours de nombreux modules fonctionnels. La commutation entre les modules fonctionnels devient une commutation entre les composants, jusqu'à présent, fondamentalement, les frameworks frontaux traditionnels auront deux concepts de routage et de composants, et les idées de mise en œuvre sont cohérentes.

Référence et utilisation de l'itinéraire

//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>

Composants et attributs de routage

Lien

• est utilisé pour sauter fonctionnellement entre les itinéraires. équivalent à la balise a. L'attribut

• to est équivalent au a de la balise href.

• <Link to="/page">page</Link> est équivalent à <a href="#/page">page</a>.

Routeur

• est le composant de routage le plus externe, et il n'y en a qu'un dans toute l'application. L'attribut

• history a deux valeurs d'attribut :

• hashHistory La route passera la partie de hachage (#) du commutateur d'URL, recommandé.

• <Router history={hashHistory}> Le format d'URL correspondant est similaire à example.com/#/some/path

• browserHistory Dans ce cas, le serveur doit être Transformation. Sinon, l'utilisateur demande directement un certain sous-itinéraire au serveur et une erreur 404 indiquant que la page Web est introuvable s'affichera.

• <Router history={browserHistory}> Le format d'URL correspondant est similaire à example.com/some/path.

Les attributs du composant Route

• Route sont des sous-composants du composant Router et peuvent être imbriqués route Implémenter l'imbrication des itinéraires.

• Attribut path : Spécifie la règle de correspondance de l'itinéraire. Cet attribut peut être omis. Dans ce cas, le composant spécifié sera toujours chargé, que le chemin corresponde ou non. .

• Attribut component : fait référence au composant correspondant qui sera rendu lorsque l'URL est mappée à la règle de correspondance de la route.

• <Route path="/" component={RootComponent}/> Lorsque l'URL est example.com/#/, le composant RootComponent sera rendu

• <Route path="/page1" component={Page1Component}/> Lorsque le. L'URL est example.com /#/page1 affichera le composant Page1Component

Utilisation de base

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')
)

Aperçu de l'effet

Paramètres de routage

• Le passage du paramètre Route est spécifié via l'attribut path du composant Route.

• La valeur du paramètre peut être obtenue via this.props.params.paramName.

• :paramName

• correspond à une partie de l'URL jusqu'à ce que le prochain /,?,# soit rencontré.

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

• Correspond à l'URL : /#/user/sam, le paramètre sam doit exister. La valeur de

• this.props.params.name est 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高亮步骤详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!