05
2021
04

React Router

路由

我们访问一个 URL,最终定向到哪个资源,这部分工作的处理程序,就是路由。Web 的路由在 组件化框架 诞生之前,一直都是后端的工作,现在的前端也具有处理路由的功能,也渐渐被接受和应用。


目前最新的 React 路由版本是 router 4,这个版本比起之前的 2.x 和 3.x 要简单好用很多。


路由的安装,通过 npm install --save react-router-dom@4.3.1 命令,@后面带的是版本号,是当前时间点最新的版本。


挂载

index.js

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import {Switch, Link, Route, BrowserRouter} from 'react-router-dom'; // 模块导入 | React Router 包含了以下这几个主要模块

import Home from './home.js'

import List from './list.js'


// index.js

class Index extends Component {

  render() {

    return (

      <BrowserRouter>

        <Switch>

          <Route exact path="/" component={Home}/> {/* 首页 */}

          <Route exact path="/list" component={List}/> {/* 列表 */}

        </Switch>

      </BrowserRouter>

    )

  }

}


ReactDOM.render(, document.getElementById('root'));

home.js

import React, { Component } from 'react';


export default class Home extends Component {

  render() {

    return <div>首页</div>

  }

}

list.js

import React, { Component } from 'react';


export default class List extends Component {

  render() {

    return <div>列表</div>

  }

}

写完上面这些代码,我们访问 localhost:3000/ 就能定向到 home.js 而 localhost:3000/list 对应的就是 list.js。


传参

路由也是有状态的,不同状态对应不同功能,路由的参数传递,同样也是绑定在 Props属性 上面。

// index.js

class Index extends Component {

  render() {

    return (

      <BrowserRouter>

        <Switch>

          <Route exact path="/" component={Home}/>

          <Route exact path="/list/:n" component={List}/> {/* 传递参数 */}

        </Switch>

      </BrowserRouter>

    )

  }

}


// list.js

export default class List extends Component {

  render() {

    return <div>列表 {this.props.match.params.n}</div> {/* 读取参数 */}

  }

}

链接

链接是一个组件到另一个组件的跳转,本质是改变另了浏览器的 URL输入。需要注意:链接的前提是 路由必须完成挂载。

class Home extends Component {

  render() {

    return (

      <div>

        <h1>首页</h1>

        <Link to="/list">点击跳转到列表</Link>

      </div>

     )

  }

}


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。