React当中的路由使用

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