## :-: 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); ```