技術標籤：reactreactjs

react路由

• • 使用方法
  • 路由執行過程
  • 預設路由
  • 程式設計式導航
  • 精確匹配

使用方法

使用步驟：

1. 安裝： npm i react-router-dom
2. 匯入路由的三個核心元件： Router / Route / Link
3. 使用 Router 元件包裹整個應用內容
4. 使用 Link 定義路由
5. 使用 Route 定義路由對應的元件

import React from 'react'
import ReactDOM from 'react-dom'
//1. 匯入路由模組
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

class App extends React.Component{
  render(){
    return (
      <div>
      //定義RouterbaoguozhenggeReact
        <Router>
        //定義路由及對應元件
          <Link to="/show">show</Link>
          <Route path="/show" component={Show}></Route>
        </Router>
      </div>
    )
  }
}
class Show extends React.Component{
  render(){
    return (
      <div>
        我是show元件
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#app'))
 

使用元件

• Router 元件： 包裹整個應用，一個 react 應用只需要一個
  • 常用兩種 Router： HashRouter 和 BrowserRouter
  • （推薦）BroswerRouter 使用 history API 實現 （localhost:3000/first）
    • import {BroswerRouter as Router, Route, Link } from 'react-router-dom'
  • HashRouter 的url地址中多了個 # (localhost:3000/#/first)
    • import {HashRouter as Router, Route, Link } from 'react-router-dom'
• Link 元件： 用於指定導航連結
  • Link 元件會被編譯成 a 標籤，to屬性會被編譯成 href 地址
• Route 元件： 定義 url 展示的元件，Route 寫在哪裡，元件就會被渲染到哪裡

路由執行過程

1. 點選 Link 元件（a 標籤）時會修改url位址列中的 pathname
2. 路由監聽到 url 地址變化之後，得到最新的 pathname，再遍歷所以的 Route 元件。使用 pathname 和 Route 中的 path 進行比對，找到匹配的 Route
3. 找到 pathname 對應的 Route 之後，再找到 componet 對應的元件進行編譯、渲染

預設路由

實現方式： 在 Route 元件配置path時，直接設定為 / 即可

<Router>
   <Route path="/" component={Login}></Route>
</Router>

這樣當地址欄為localhost:3000/ 時，就能看到 login 頁面

程式設計式導航

程式設計式導航就是通過 js 程式碼來進行跳轉

• this.props.history.push( path )
  • path 是要跳轉到的url地址
• this.props.history.go(n)
  • n: 前進或者後退幾個頁面

import React from 'react'
import ReactDOM from 'react-dom'
//1. 匯入路由模組
import {BrowserRouter as Router, Route} from 'react-router-dom'

class App extends React.Component{
  render(){
    return (
        <Router>
          <Route path="/" component={Login}></Route>
          <Route path="/register" component={Register}></Route>
        </Router>
    )
  }
}
class Register extends React.Component{
  quit = ()=>{
    this.props.history.go(-1)
  }
  render(){
    return (
      <div>
        這是註冊介面
        <button onClick={this.quit}>退出</button>
      </div>
    )
  }
}
class Login extends React.Component{
  login=()=>{
    this.props.history.push('/register')
  }
  render () {
    return (
      <div>
        賬號: <input type="text" /><br />
        密碼: <input type="password" /><br />
        <button onClick={this.login}>登入</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.querySelector('#app'))

精確匹配

在上面的案例中，當我們點選登陸後，會跳轉到註冊介面，但是登陸介面的元件並未消失

原因： 預設情況下， React 使用的是 模糊匹配模式

模糊匹配規則： 只要 pathname 以 path 開頭就能匹配成功

解決方案： 使用精確路由
精確路由： 為Route 增加 exact 屬性， 當使用了精確匹配時， path 和 pathname 必須完全一樣才能跳轉

 		<Router>
          <Route exact path="/" component={Login}></Route>
          <Route path="/register" component={Register}></Route>
        </Router>