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組件的顯示