React 路由---基本使用

一：安裝

運行 npm i react-router-dom 安裝react路由依賴項

創建一個 App.js 根組件，並在根組件中，按需導入路由需要的三個組件

 

HashRouter: 表示路由的包裹容器，這個組件，在項目中，只使用唯一的一次！

就在 App 根組件中，作為最外層的容器，報包裹住整個App中的UI結構

import React from "react"; // 引入路由 
import { HashRouter, Route, Link } from "react-router-dom"; class App extends React.Component { render() { return ( 　　// 全局應用組件路由 　　// 此后所有內容 都在 HashRouter 
　　<HashRouter> 　　{/* HashRouter 里面只能有一個根標簽 */} 　　<div>123</div>
　　 </HashRouter> ); 　　} 
} export default App;

二，路由跳轉鏈接

Link: 表示路由的鏈接；就相當於 Vue 中的 <router-link></router-link>

Link 組件的屬性節點上，有 to 屬性，表示點擊這個鏈接之后，會跳轉到哪個路由地址

render() { return ( // 全局應用組件路由 // 此后所有內容 都在 HashRouter 
<HashRouter> {/* HashRouter 里面只能有一個根標簽 */} <div><h1>組件路由</h1> 　　{/* 添加路由跳轉鏈接 */} 　　　　<Link to="/home">首頁</Link>&nbsp;&nbsp; 
　　　　<Link to="/movie">電影</Link>&nbsp;&nbsp; 
　　　　<Link to="/about">關於</Link> 
　　</div> 
</HashRouter> ); }

三：路由規則匹配

Route: 表示路由的匹配關系，可以把 每個 Route，都看成是每一個路由規則；

Route 的屬性節點中，包含 path 屬性和 component 屬性；

其中，path 表示當前路由規則，要匹配的 hash 地址； component 表示當前路由規則對應要顯示的組件

注意： Route 有兩層身份： 1. 路由規則 2. 占位符

import React from "react"; // 引入路由
import { HashRouter, Route, Link } from "react-router-dom"; // 引入組件
import Home from './components/Home' import Movie from './components/Movie' import About from './components/About' 

class App extends React.Component { render() { 　　return (
  <HashRouter> 
　　<div> <h1>組件路由</h1> 　　　{/* 路由鏈接組件 */} 　　　<Link to="/home">首頁</Link>&nbsp;&nbsp; 　　　<Link to="/movie">電影</Link>&nbsp;&nbsp; 　　 <Link to="/about">關於</Link>
 　　 <hr></hr> 　　　　{/* 新增一個重定向的路由規則 */} 　　　<Route path="/home" component={Home} ></Route>
 　　 <Route path="/movie" component={Movie} ></Route> 
　　　<Route path="/about" component={About} ></Route>
 　　</div> 
  </HashRouter> ); } }
export default App;