安裝依賴
安裝路由模組：npm i react-router-dom -S
基本路由
首先我們新建立一個react專案(create-react-app demo)用來演示
並且刪去不需要的程式碼，新建幾個JS頁面用來測試，如下：
接著我們需要在index.js檔案中引入我們安裝的依賴（如果你覺得名字長的話，可以使用as起一個別名）
記得一定要把根元件（<App />）包起來才可以，這樣其他元件才可以使用路由
index.js程式碼：
import React from "react"
import ReactDOM from 'react-dom'
import App from './App'
//引入路由依賴，並起一個別名，因為原先的名字太長了
import {BrowserRouter as Router} from 'react-router-dom'
ReactDOM.render(
//把根元件用BrowserRouter包起來，這裡我用了別名
<Router>
<App />
</Router>
,document.getElementById('app'))
複製程式碼接著在App.js中引入所需要的依賴和要使用的元件，
並配置路由規則，設定點選跳轉
App.js程式碼：
import React, { Component } from 'react';
//匯入路由依賴和元件
import { Route, Link } from "react-router-dom"
import Home from "./Home"
import List from "./List"
import User from "./User"
class App extends Component {
render() {
return (
<>
<ul>
<li>
<Link to="/">首頁</Link>
</li>
<li>
<Link to="/list">列表頁</Link>
</li>
<li>
<Link to="/user">使用者中心</Link>
</li>
</ul>
{/* 配置路由規則 exact表示精確匹配，防止匹配其他頁面的時候匹配到/，也就是首頁*/}
<Route path='/' exact component={Home}></Route>
<Route path='/list' component={List}></Route>
<Route path='/user' component={User}></Route>
</>
)
}
}
export default App;
複製程式碼效果演示：
巢狀路由
在上面的基礎上，我們在src下新建一個user資料夾，用來存放 註冊和登入頁面，如下：
我們想要在哪個頁面下巢狀的話，那麼就在該頁面下配置路由
我們想要在使用者中心頁面中巢狀頁面，則在User.js檔案中匯入路由依賴和元件並配置路由
修改User.js檔案程式碼：
import React,{Component} from 'react';
//匯入路由依賴和元件
import { Route, Link } from "react-router-dom"
import Reg from "./user/Reg"
import Login from "./user/Login"
class User extends Component{
render(){
return(
<>
<h1>使用者中心</h1>
<ul>
<li>
<Link to="/user/reg">註冊</Link>
</li>
<li>
<Link to="/user/login">登入</Link>
</li>
</ul>
{/* 配置路由 */}
<Route path="/user/reg" component={Reg}></Route>
<Route path="/user/login" component={Login}></Route>
</>
)
}
}
export default User;
複製程式碼效果演示：
動態路由
在src下新建一個Detail.js檔案，用來展示列表詳情：
import React from "react"
// 得到id,發起axios請求，獲取詳情的資料
class Detail extends React.Component {
componentDidMount(){
console.log(this.props.match.params.id)
}
render() {
return (
<div>
<h2>商品詳情頁面</h2>
<h4>{"發起axios請求獲取"+this.props.match.params.id+"號商品的資料"}</h4>
</div>
)
}
}
export default Detail
複製程式碼接著修改List.js中的程式碼：
import React,{Component} from 'react';
//使用Link
import {Link} from 'react-router-dom'
class List extends Component{
render(){
return(
<>
<h1>列表頁</h1>
<ul>
<li><Link to='/detail/1'>第一號商品</Link></li>
<li><Link to='/detail/2'>第二號商品</Link></li>
<li><Link to='/detail/3'>第三號商品</Link></li>
</ul>
</>
)
}
}
export default List;
複製程式碼最後我們需要在App.js中引入Detail.js檔案，並配置路由：
import Detail from './Detail'
//記得在/detail後面加/:id
<Route path='/detail/:id' component={Detail}></Route>
複製程式碼執行效果：
程式設計式路由
修改List.js檔案，
引入 history 依賴，生成history，並配置history，
定義按鈕，實現跳轉：
import React,{Component} from 'react';
//使用Link
import {Link} from 'react-router-dom'
//引入
import {createBrowserHistory} from 'history'
//生成history
let history = createBrowserHistory({
//配置強制重新整理，如果不重新整理，則沒反應，需要手動重新整理才會跳轉
forceRefresh:true
})
class List extends Component{
render(){
return(
<>
<h1>列表頁</h1>
<ul>
<li><Link to='/detail/1'>第一號商品</Link></li>
<li><Link to='/detail/2'>第二號商品</Link></li>
<li><Link to='/detail/3'>第三號商品</Link></li>
<p>......</p>
{/* 在history中可以使用push方法進行跳轉 */}
<button onClick={()=>history.push('/detail/100')}>第一百號商品</button>
</ul>
</>
)
}
}
export default List;
複製程式碼接著我們在Detail.js檔案中也引入並生成history
在這裡我們定義一個返回按鈕，可以返回上一級：
import React from "react"
//引入
import { createBrowserHistory } from 'history';
// 生成history
let history = createBrowserHistory();
class Detail extends React.Component {
componentDidMount(){
console.log(this.props.match.params.id)
}
render() {
return (
<div>
<h2>商品詳情頁面</h2>
<h4>{"發起axios請求獲取"+this.props.match.params.id+"號商品的資料"}</h4>
{/* 這兩種方法都可以實現返回上一級 */}
{/* <button onClick={()=>history.goBack()}>返回</button> */}
<button onClick={()=>history.go(-1)}>返回</button>
</div>
)
}
}
export default Detail
複製程式碼執行效果：
重定向與Switch
一般重定向需要搭配Switch一起使用
我們需要在src下面新建一個404頁面，如果匹配不到頁面的話，就跳到404頁面
import React,{Component} from 'react';
class Error extends Component{
render(){
return(
<><h1>頁面飛走了</h1></>
)
}
}
export default Error;
複製程式碼接下來我們需要修改App.js檔案的程式碼
引入所需要的依賴和頁面，並修改配置路由規則的程式碼：
import React, { Component } from 'react';
//匯入路由依賴和元件
import { Route, Link, Redirect, Switch } from "react-router-dom"
import Home from "./Home"
import List from "./List"
import User from "./User"
import Detail from './Detail'
import Error from './404'
class App extends Component {
render() {
return (
<>
<ul>
<li>
<Link to="/">首頁</Link>
</li>
<li>
<Link to="/list">列表頁</Link>
</li>
<li>
<Link to="/user">使用者中心</Link>
</li>
</ul>
{/* 配置路由規則 exact表示精確匹配，防止匹配其他頁面的時候匹配到/，也就是首頁*/}
{/* Switch表示如果匹配到了路由，就不再往下面匹配了，如果不寫Switch，則一直會匹配到404頁面 */}
<Switch>
{/* 如果訪問個人中心頁面，則重定向到列表頁面 */}
<Redirect from='/user' to='/list'></Redirect>
<Route path='/' exact component={Home}></Route>
<Route path='/list' component={List}></Route>
<Route path='/user' component={User}></Route>
<Route path='/detail/:id' component={Detail}></Route>
{/* 沒有寫path表示匹配到所有的路徑 */}
<Route component={Error}></Route>
</Switch>
</>
)
}
}
export default App;
複製程式碼執行效果：
