Detaillierte Erläuterung des Routings in React

Dieses Mal werde ich Ihnen die Verwendung von Routing in React ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von Routing in React? Das Folgende ist ein praktischer Fall.

Routing

wird durch Zuordnen der URL zur entsprechenden Funktion implementiert. Um React-Routing zu verwenden, muss zuerst „react-router.js“ eingeführt werden.
Hinweis:
Es gibt einen großen Unterschied zwischen den React-Router-Versionen 4.0 und höher und 3.0 und niedriger. Dieses Tutorial verwendet Version 3.0.2 und Tutorials für Versionen 4.0 und höher werden später aktualisiert.
Bei der Installation mit npm wird standardmäßig die neueste Version installiert. Wenn die installierte Version die neueste ist und Sie Version 3.0 verwenden, wird ein Fehler gemeldet.
Sie müssen also bei der Installation mit npm die Version npm install react-router@3.0.2 --save-dev angeben.

Routing-Hintergrund-SPA

Das traditionelle Frontend wechselt grundsätzlich zwischen Funktionsmodulen, indem es zwischen Seiten springt. Darüber hinaus führt dieser Ansatz zu einer großen Anzahl von HTML-Seiten in einem Projekt Es gibt viele statische Ressourcendateien, die importiert werden müssen, was in Bezug auf die Leistung immer ein Problem darstellt. Später, mit der Popularität von Ajax und der bequemen Verwendung der Ajax-Kapselung durch jQuery, werden Entwickler Ajax häufig verwenden, um eine HTML-Seite in einen Container der aktuellen Seite zu laden, um ein Laden ohne Aktualisierung zu erreichen, aber es gibt immer noch keine Lösung für die Leistungsprobleme Dies wird durch das Vorhandensein einer großen Anzahl von HTML-Seiten und das Laden einer großen Anzahl statischer Ressourcendateien auf jeder Seite verursacht. Mit der Beliebtheit des mobilen Internets stellen mobile Endgeräte immer höhere Leistungsanforderungen und Verkehrsbeschränkungen beim Laden von Seiten, sodass sich gängige Front-End-Frameworks in Richtung SPA bewegen.
SPA, die Abkürzung für Single Page Application, Einzelseitenanwendung. Der Zweck besteht darin, dass die gesamte Anwendung nur eine HTML-Seite hat. In Kombination mit der einheitlichen Verpackungsidee des Erstellens eines Webpacks werden alle statischen Ressourcendateien in eine JS-Datei gepackt , in der einzigen HTML-Seite Seitenreferenz, wodurch die Idee einer HTML-Datei und einer JS-Datei, die eine Anwendung vervollständigen, wirklich verwirklicht wird.
SPA optimiert die Leistung beim statischen Laden, aber eine Anwendung verfügt immer noch über viele Funktionsmodule. Das Umschalten zwischen Funktionsmodulen wird zum Umschalten zwischen Komponenten. Bisher gibt es im Wesentlichen zwei Konzepte für Routing und Komponenten: und die Umsetzungsideen stimmen.

Routenreferenz und -verwendung

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

Routing-Komponenten und -Attribute

Link

• wird verwendet, um zwischen Routen zu wechseln Funktion im a-Tag. Das

• -Attribut to entspricht dem a des href-Tags.

• <Link to="/page">page</Link> entspricht <a href="#/page">page</a>.

Router

• ist die äußerste Routing-Komponente und es gibt nur eine in der gesamten Anwendung. Das

• -Attribut history hat zwei Attributwerte:

• hashHistory Die Route übergibt den Hash-Teil (#) des URL-Switch, empfohlen.

• <Router history={hashHistory}> Das entsprechende URL-Format ähnelt example.com/#/some/path

• browserHistory In diesem Fall Der Server muss Transformation sein. Andernfalls fordert der Benutzer direkt eine bestimmte Unterroute vom Server an und es wird ein 404-Fehler angezeigt, der darauf hinweist, dass die Webseite nicht gefunden werden kann.

• <Router history={browserHistory}> Das entsprechende URL-Format ähnelt example.com/some/path.

Die Attribute der Routenkomponente

• Route sind Unterkomponenten der Komponente Router und können verschachtelt werden route Routenverschachtelung implementieren.

• Attribut path: Gibt die Übereinstimmungsregel der Route an. Dieses Attribut kann weggelassen werden. In diesem Fall wird die angegebene Komponente immer geladen, unabhängig davon, ob der Pfad übereinstimmt .

• Attribut component: bezieht sich auf die entsprechende Komponente, die gerendert wird, wenn die URL der Übereinstimmungsregel der Route zugeordnet wird.

• <Route path="/" component={RootComponent}/> Wenn die URL example.com/#/ ist, wird die Komponente RootComponent gerendert

• <Route path="/page1" component={Page1Component}/> Wenn die URL ist example.com /#/page1 rendert die Komponente Page1Component

Grundlegende Verwendung

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

Effektvorschau

Routing-Parameter

• Die Parameterübergabe der Route wird über das Pfadattribut der Route-Komponente angegeben.

• Der Parameterwert kann über this.props.params.paramName abgerufen werden.

• :paramName

• stimmt mit einem Teil der URL überein, bis das nächste /,?,# gefunden wird.

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

• Entspricht der URL: /#/user/sam, der Parameter sam muss vorhanden sein. Der Wert von

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Routings in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!