1. 程式人生 > 實用技巧 >react-router

react-router

react-router包含三個庫:react-router、react-router-dom、react-router-native;react-router提供基本的路由功能,實際使用時不需要直接安裝,根據執行環境選擇react-router-dom(瀏覽器中)或react-router-native(rn中)

路由使用例子:

// ReactRouterPage.js
import React, { Component } from "react";
import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
import HomePage from "./HomePage";
import UserPage from "./UserPage";
import LoginPage from "./LoginPage";

export default class RouterPage extends Component {
  render() {
    return (
      <div>
        <h3>RouterPage</h3>
        <Router>
          <Link to="/">首頁</Link>
          <Link to="/user">使用者中心</Link>
          <Link to="/login">登入</Link>
          {/*Route一定要包裹在Router之內,因為Route要使用history location,而這些都來自於Router */}
          {/**path如果不寫,則一直匹配 */}
          {/**Switch獨佔路由 匹配一個 */}
          {/**什麼都不寫放在最後如404 */}
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/user" component={UserPage} />
            <Route path="/login" component={LoginPage} />
            <Route render={() => <div>404</div>} />
          </Switch>
        </Router>
      </div>
    );
  }
}