React 路由系统及版本5和版本6

路由系统

单页应用(SPA)的多页面切换 需要使用到路由功能。

多个组件的路由和切换 使用路由

React中默认没有安装路由，需要手动安装

安装不指定版本默认是最新版本6

目前大多数项目可能还处于版本5

npm i react-router-dom@5

安装之后，在package.json确认以下软件名称及其版本

"react-router-dom": "^5.3.0"

先装5版本，如果安装了新版本，通过以下命令卸载。重新安装5版本。

npm 卸载命令

npm uninstall react-router-dom

官方网址：reactrouter.com/

其它中文文档，语法可能过时，要注意甄别。

以下为版本5的写法

①建立几个页面

在/src/pages目录下建立A.js,B.js,C.js

页面组件内部，添加一些内容，生成一个组件，如果页面组件为空，切换路由会报错。

src\pages\A.js 其它页面类似结构 文字内容做一个标识，方便切换之后，知道切换到哪个页面了

import React, { Component } from 'react'

export default class A extends Component {
  render() {
    return (
      <div>
        A页面
      </div>
    )
  }
}

②编写路由切换

/src/App.js

import React, { Component } from "react";
/**
 *  路由组成
 *  1.组件和路由对应关系  routes routes=[{path:'/a',component:'组件名称'}]
 *  2、router 管理整个路由
 *  3、router-link  切换标签 to 路径参数
 *  4、router-view  切换的组件展示的位置
 *
 */
// 1.导入react中路由的相关组件
// import as 别名 起个小名 方便调用
import {
  BrowserRouter as Router, // 管理整个路由系统
  Route, // 路径和组件的对应关系
  Switch, // 类似router-view切换之后显示组件的位置
  Link, // 类似router-link的作用 切换组件
} from "react-router-dom";
// 2.导入页面组件
import A from "./pages/A";
import B from "./pages/B";
import C from "./pages/C";
export default class App extends Component {
  render() {
    // 3.路由管理
    // Router管理整个路由
    return (
      <Router>
        {/* 切换标签 */}
        <div>
          <Link to="/a">A页面</Link><br/>
          <Link to="/b">B页面</Link><br/>
          <Link to="/c">c页面</Link><br/>
        </div>
        <hr/>
        {/* 对应关系和组件切换展示位置 */}
        <Switch>
          {/* Route 对应关系 path路径  component组件 */}
          <Route path="/a" component={A}></Route>
          <Route path="/b" component={B}></Route>
          <Route path="/c" component={C}></Route>
        </Switch>
      </Router>
    );
  }
}

路由练习

制作3个页面 名称为HomePage，NewsPage.js，ContactPage.js

首页，新闻页，联系我们

src/App.js

import React, { Component } from "react";
// 路由组件导入
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
// 页面组件导入
import Home from "./pages/HomePage";
import News from "./pages/NewsPage";
import Contact from "./pages/ContactPage";
export default class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Link to="/home">首页</Link>
          <br />
          {/* 传参 步骤2 */}
          <Link to="/news/100/标题">新闻</Link>
          <br />
          <Link to="/contact">联系我们</Link>
        </div>
        <hr />
        <Switch>
          {/* 默认访问的组件页面 */}
          {/* exact 精确匹配 path路径 */}
          <Route path="/" exact component={Home}></Route>
          <Route path="/home" component={Home}></Route>
          {/* 定义传参方式 步骤一 */}
          <Route path="/news/:id/:title" component={News}></Route>
          <Route path="/contact" component={Contact}></Route>
        </Switch>
      </Router>
    );
  }
}

src\pages\NewsPage@5.js

import React, { Component } from 'react'

export default class NewsPage extends Component {
  // React中把组件外部传入的数据 存放在props
  // 路由参数也存放在props
  render() {
    console.log(this.props);
    // es6 解构语法 从props中获取路由参数
    const {id,title} = this.props.match.params;
    // 获取编程跳转路由的方法
    const {push} = this.props.history;
    return (
      <div>
        新闻页
        <div>id:{id}</div>
        <div>title:{title}</div>
        {/* 编程方式跳转 通过事件触发方法 */}
        <button onClick={()=>push('/home')}>回到首页</button>
        <button onClick={()=>push('/contact')}>去联系我们</button>
      </div>
    )
  }
}

尝试6版本的写法，需要卸载5版本

卸载时关闭脚手架服务 ctrl+c

6版本中 编程跳转和接收路由参数 只能使用rfc

npm uninstall react-router-dom
npm i react-router-dom