React 当中的路由

使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。

安装react-router-dom

npm install react-router-dom --save
yarn add react-router-dom // 本人喜欢的安装包方式不了解的可以去看一下yarn官网

基本操作

首先我们新建两个组件(以下操作都是在react框架当中的操作并不是原生react)

one 组件

import React, { Component } from 'react'

export default class One extends Component {

    render() {

        return (

            <div>

                one

            </div>

        )

    }

}

two 组件

import React, { Component } from 'react'

export default class Two extends Component {

    render() {

        return (

            <div>

                two

            </div>

        )

    }

}

当我们在React当中使用路由的时候，必须在index.js这个入口文件引入路由

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

import { BrowserRouter as Router } from 'react-router-dom'  //引入路由

ReactDOM.render(

    <Router>

        <App />

    </Router>

    , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

浏览器有两种模式历史记录模式(BrowserRouter) 哈希模式(HashRouter)

在这里我们使用的是历史记录模式

import { BrowserRouter as Router } from 'react-router-dom' //引入路由

因为 BrowserRouter太长了！！所以我们用as给他起了一个别名Router。

通过Router包裹App组件我们就可以使用路由了，它同时也解决了路由传参的问题。这一步是必不可少的

在App.js当中

import React from 'react';

import './App.css';

import One from './component/one'

import Two from './component/two'

import { Route, Link, NavLink, Redirect, withRouter, Switch } from 'react-router-dom'

class App extends React.Component {

  render() {

    return (

      <div className="App" >

        <Link to="/one">one组件</Link>

        <Link to="/two">two组件</Link>

          <Route path='/one' component={One}></Route>

          <Route path='/two' component={Two}></Route>

      </div>

    );

  }

}

export default App;

第一步：我们需要引入One组件和Two组件

第二步：我们需要引入两个标签 Route 和 Link

第三步：路由跳转是根据路径来跳转的这个步骤是由Route标签来实现的 path属性是目标地址 component是当路径是/one 的时候我们调用的组件名字

然后我们就可以实现路由切换

在路由切换的过程中也可以使用NavLink

import React from 'react';

import './App.css';

import One from './component/one'

import Two from './component/two'

import { Route, Link, NavLink, Redirect, withRouter, Switch } from 'react-router-dom'

class App extends React.Component {

  change = () => {

    this.props.history.push('two')

  }

  render() {

    return (

      <div className="App" >

        <NavLink to="/one">one组件</NavLink>

        <NavLink to="/two">two组件</NavLink>

          <Route path='/one' component={One}></Route>

          <Route path='/two' component={Two}></Route>

      </div>

    );

  }

}

export default App;

NavLink和Link无本质的区别但是NavLink 比 Link 多了一个样式

我们可以通过 active类名来设置当前路由的样式

路由当中的重定向(重定向的意义一般是用来设置默认选中的组件)

设置重定向之前的效果

我们刚进入界面的时候因为没有适用的路径，所以不会有任何组件的渲染

当我们设置了重定向的时候我们默认访问的路径会变成/one

在路由当中还有一个属性精确匹配exact

import React from 'react';

import './App.css';

import One from './component/one'

import Two from './component/two'

import { Route, Link, NavLink, Redirect, withRouter, Switch } from 'react-router-dom'

class App extends React.Component {

  change = () => {

    this.props.history.push('two')

  }

  render() {

    return (

      <div className="App" >

        <NavLink to="/one/wen">one组件</NavLink>

        <NavLink to="/two">two组件</NavLink>

          <Route path='/one/:name' component={One}></Route>

          <Route path='/two' component={Two}></Route>

          <Redirect from='/' to="/one" exact></Redirect>

      </div>

    );

  }

}

export default App;

我们还可以通过编程式导航实现路由切换

在我们的例子当中所使用的App组件并不是一个路由组件他没有路由组件的三个重要属性 history location match

这个是App组件当中打印的this.props 并没有这三个属性

显而易见 App组件并不是一个路由组件这个时候我们就需要用到 react-router-dom当中的withRouter，他可以将App组件变成一个路由组件这样有了history属性我们就可以实现编程式导航了

路由当中Switch 当有很多个匹配项的时候他只会匹配第一个找到的

import React from 'react';

import './App.css';

import One from './component/one'

import Two from './component/two'

import { Route, Link, NavLink, Redirect, withRouter, Switch } from 'react-router-dom'

class App extends React.Component {

  change = () => {

    this.props.history.push('two')

  }

  render() {

    return (

      <div className="App" >

        <NavLink to="/one">one组件</NavLink>

        <NavLink to="/two">two组件</NavLink>

        {/* <button onClick={this.change} > 编程式导航到two组件</button> */}

        <Switch>

          <Route path='/one' component={One}></Route>

          <Route path='/two' component={Two}></Route>

          <Redirect from='/' to="/one" exact></Redirect>

        </Switch>

      </div>

    );

  }

}

export default withRouter(App);

路由传参

通过params传值

优势：刷新地址栏，参数依然存在

缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

import React from 'react';

import './App.css';

import One from './component/one'

import Two from './component/two'

import { Route, Link, NavLink, Redirect, withRouter, Switch } from 'react-router-dom'

class App extends React.Component {

  change = () => {

    this.props.history.push('two')

  }

  render() {

    return (

      <div className="App" >

        <NavLink to="/one/wen">one组件</NavLink>

        <NavLink to="/two">two组件</NavLink>

        {/* <button onClick={this.change} > 编程式导航到two组件</button> */}

        <Switch>

          <Route path='/one/:name' component={One}></Route>

          <Route path='/two' component={Two}></Route>

          <Redirect from='/' to="/one" exact></Redirect>

        </Switch>

      </div>

    );

  }

}

export default withRouter(App);

 <Route path='/one/:name' component={One}></Route>  //这句话规定了参数的名字是name

  <NavLink to="/one/wen">one组件</NavLink> 		 // 这句话给传递的参数赋值

// 在one组件当中 我们可以用通过  this.props.match.params.name 获取参数

通过 to属性传值

优势：传参优雅，传递参数可传对象；

缺点：刷新地址栏，参数丢失

<Route path='/query' component={Query}/>

<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>

this.props.history.push({pathname:"/query",query: { name : 'sunny' }});

读取参数用: this.props.location.query.name