## :-: 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);
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request