React 中 使用react-router-dom （超简单）

在react里如何进行路由的配置呢？
需要用到的插件 create-react-app、react-router-dom。

1.根据create-react-app脚手架进行项目的搭建
传送门，如何使用脚手架搭建 → create-react-app

2.安装插件

yarn add react-router-dom

3.在src文件夹下创建pages文件夹，内涵三个 .JSX组件

About.jsx

//about.js
import React, { Component } from "react";

export default class About extends Component {
  render() {
    return <h1>欢迎，这里是About</h1>;
  }
}

Home.jsx

//about.js
import React, { Component } from "react";

export default class About extends Component {
  render() {
    return <h1>欢迎，这里是Home</h1>;
  }
}

Error.jsx

//about.js
import React, { Component } from "react";

export default class About extends Component {
  render() {
    return <h1>欢迎，这里是Error</h1>;
  }
}

4.修改app.js文件

//引入react jsx写法的必须
import React from "react";
//引入需要用到的页面组件
import Home from "./pages/Home";
import About from "./pages/About";
import Error from "./pages/Error";

//引入一些模块
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";

function router() {
  return (
    <Router>
      <NavLink to="/home"> home |</NavLink>
      <NavLink to="/about"> about</NavLink>

      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/" to="/home" component={Home} exact />
        <Route path="*" component={Error} />
      </Switch>
    </Router>
  );
}

export default router;

此时，简单的路由就已实现。
效果如下：

打开项目时：

由于配置了Redirect，在项目运行时会默认匹配 /home路径的路由。显示相应的组件

点击about时:

当点击about就会进行路由的相对路径切换，到/about路径的路由，显示相应的组件

在地址栏里随便输入时：

就行进行Error组件的显示