## :-: React - 路由(route) :-: 安裝React路由 ``` $ npm install react-router-dom ``` :-: 基本使用 ``` import React from "react"; import ReactDOM from "react-dom"; import Home from "./views/Home.js"; import Activities from "./views/Activities.js"; import Toppics from "./views/Toppics.js"; import Login from "./views/Login.js"; import "./index.css"; import NavBar from "./components/NavBar.js"; // 路由容器： // HashRouter -- 哈希路由 // BrowserRouter -- 瀏覽器路由 // react-router-dom -- React路由插件 import { BrowserRouter as Router, // 路由容器 Route, // Route -- 路徑 Switch, // Switch -- 不向下匹配 Redirect, // Redirect -- 重定向 Link, // 用于跳轉的組件 NavLink // 用于跳轉的組件(自動加'active'類名) } from "react-router-dom"; ReactDOM.render( <Router> <div className="nav"> <Link to="/">首頁</Link> <Link to="/activities">動態</Link> <Link to="/topics">話題</Link> <Link to="/iogin">登陸</Link> {/* NavLink -- 選中時會加class類名 */} <NavLink exact to="/">首頁</NavLink> <NavLink exact to="/activities">動態</NavLink> <NavLink exact to="/topics">話題</NavLink> <NavLink exact to="/iogin">登陸</NavLink> </div> <div className="content"> {/* Switch -- 不向下匹配 */} <Switch> {/* exact -- 嚴格匹配(可以簡寫：exact={true} == exact) */} <Route path="/" exact={true} component={Home} /> <Route path="/activities" exact component={Activities} /> <Route path="/topics" exact={true} component={Toppics} /> <Route path="/iogin" exact={true} component={Login} /> {/* Redirect -- 重定向，重定向到跟路徑 */} <Redirect to="/" /> </Switch> </div> </Router>, document.getElementById("root") ); ``` ## :-: React - 路由(route) ``` {/* 動態路由組件提供了this.props.history.push 方法(跳轉、刷新) */} {/* 被跳轉頁面組件 - 設置動態路由 path="/article/:id" */} {/* 通過 this.props.match.params 對象下的id屬性獲取 */} <Route path="/article/:id" component={ Article }></Route> {/* 導航組件 - 設置跳轉 */} <Link to={`/article/${item.id}`}>{item.title}</Link> {/* 另外一種寫法(傳遞數據) */} <Link to={ {pathname:`/article/${item.id}`,state:{author:'item.author',title:'item.title'} }}>{item.title}</Link> ``` ## :-: React - 高階組件 ``` import Pins from './components/NavBar.js'; // 一般的組件無法獲取this.props.history方法操作路由。 // 返回一個被Route包裹的組件，這樣就可以拿到this.props.history及操作路由的相關方法了、 const withRouter = (Component) => { return ()=>{ return <Route component={Component} /> } } export default withRouter(NavBar); // -- 或 // React也同樣提供了withRouter方法直接調用就好了、(NavBar是普通組件) import { withRouter } from 'react-router-dom'; export default withRouter(NavBar); ```