react-router
阿新 • • 發佈:2020-07-30
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> ); } }