react 路由系统

1、react-router-dom的介绍及安装；

命令行输入 npm install react-router-dom

2 、路由的跳转

路由的跳转分为两种，一种为平行跳转，即从一个网页跳转到另外一个网页，另一种为嵌套跳转，实现了单页面应用，即在本页面内实现部分内容修改

2.1平行路由

我们在App.js下创建了Router.js 创建了三个页面，分别为首页Home.js 新闻页News.js和关于页 About.js
Router.js代码如下

import React, { Component } from 'react'
import {
    BrowserRouter,
    Route,
    Switch
} from 'react-router-dom'
import Home from "./Page/Home"
import About from "./Page/About"
import News from "./Page/News"

export default class Router extends Component {
    render() {
        return (
            <BrowserRouter>
              <Switch>
                  <Route path="/news" component={News}/>
                  <Route path="/about" component={About}/>
                  <Route path="/" component={Home}/>
              </Switch>
            </BrowserRouter>
        )
    }
}

我们引入react-router-dom ，引入相关的页面，通过 path设置不同的路径，通过component设置跳转的页面，接着我们来看Home.js中的代码

import React, { Component } from 'react'
import {
    Link
} from 'react-router-dom'


export default class Home extends Component {
    render() {
        return (
            <div>
                <Link to="/news">News</Link>
             <br/> 
               <Link to="/about">About</Link>
                
            </div>
        )
    }
}

在Home.js中我们通过添加Link标签，给其to给予不同的路径，使其与Router.js中的路径保持一致，跳转到不同的页面，我们点News就会跳到新的页面News，点About就会跳转到新的页面About

2.2 嵌套路由

我们跳转到New.js中
New.js代码如下

import React, { Component } from 'react'
import {
    BrowserRouter,
    Route,
    Link,
    Switch
} from 'react-router-dom'
import News1 from "./News1"
import News2 from "./News2"
import News3 from "./News3"


export default class News extends Component {
    render() {
        return (
           <BrowserRouter>
            <div>
               <p>
               <Link to="/news/1">新闻1</Link>
               <Link to="/news/2">新闻2</Link>
               <Link to="/news/3">新闻3</Link>
               </p>
              <div className="container">
                <Switch>
                  <Route path="/news/1" component={News1}/>
                  <Route path="/news/2" component={News2}/>
                  <Route path="/news/3" component={News3}/>
                </Switch>
              </div>
        
            </div>          
           </BrowserRouter>
        )
    }
}

我们在新闻页面设置了三个跳转标签，新闻123，通过点击新闻123，分别跳转到新闻123不同的内容，但是内容都是在container的盒子中，只是container中的内容会变，页面不会刷新，具体实现见上图代码，我讲的不是很明白

3、路由传值

路由传值一共有三种方式，具体内容点此链接
路由传值的三种方式详解

4、、路由内置组件：HashRouter、BrowserRouter、Route、Link

4.1 Link

Link就像是一个个的路牌，为我们指明组件的位置。Link使用声明式的方式为应用程序提供导航功能，定义的Link最终会被渲染成一个a标签。Link使用to这个属性来指明目标组件的路径，可以直接使用一个字符串，也可以传入一个对象。

// 字符串参数

查询

// 对象参数

// 选中后被添加class selected
<NavLink to={’/’} exact activeClassName=‘selected’>Home
// 选中后被附加样式 color:red
<NavLink to={’/gallery’} activeStyle={{color:red}}>Gallery

4.2 Route

Route应该是react-route中最重要的组件了，它的作用是当location与Route的path匹配时渲染Route中的Component。如果有多个Route匹配，那么这些Route的Component都会被渲染。

与Link类似，Route也有一个exact属性，作用也是要求location与Route的path绝对匹配。

// 当location形如 http://location/时，Home就会被渲染。
// 因为 “/” 会匹配所有的URL，所以这里设置一个exact来强制绝对匹配。

4.3 HashRouter和BrowserRouter

BrowserRouter：h5路由（history API）
HashRouter：哈希路由

rowserRouter：

原理是H5的history API，IE9及以下不兼容，需要由web server支持，在web client这边window.location.pathname被react router解析，example.com/react/route

HashRouter：

原理是URL的hash，不需要由web server支持，因为它的只有‘/’path需要由web server支持，而#/react/route URL不能被web server读取，在web client这边window,location.hash被react router解析，example.com/#/react/route

转载于:https://www.cnblogs.com/ruoshuisanqian/p/10291929.html