react-router

1、使用方法

<Router history={hashHistory}>
 <Route path="/" component={App}/>
 <Route path="/repos" component={Repos}/>
 <Route path="/about" component={About}/>
</Router>

2、嵌套路由、path、通配符

Route 可以嵌套使用。

path 屬性指定路由的匹配規(guī)則。

<Router history={hashHistory}>
 <Route path="/user" component={App}>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Route>
</Router>
<Route path="/hello/:name">

// :paramName 匹配 URL 的一個(gè)部分，直到遇到下一個(gè)/、?、#為止。

// 匹配 /hello/michael

// 匹配 /hello/ryan

<Route path="/hello(/:name)"> // ()表示 URL 的這個(gè)部分是可選的。

// 匹配 /hello

// 匹配 /hello/michael

// 匹配 /hello/ryan

<Route path="/files/*.*"> // *匹配任意字符，直到模式里面的下一個(gè)字符為止。匹配方式是非貪婪模式。

// 匹配 /files/hello1.jpg

// 匹配 /files/hello2.html

<Route path="/files/*"> 

// 匹配 /files/a

// 匹配 /files/a/b

<Route path="/files/**"> // ** 匹配任意字符，直到下一個(gè)/、?、#為止。匹配方式是貪婪模式。

// 匹配 /files/a

// 匹配 /files/indexa

3、histroy 屬性

Router 組件的 history 屬性，用來監(jiān)聽瀏覽器地址欄的變化，并將 URL 解析成一個(gè)地址對(duì)象，供 React Router 匹配。

history 屬性，常用的 2 種：

(1).hashHistory

如果設(shè)為 hashHistory，路由將通過 URL 的 hash 部分（#）切換，URL 的形式類似 example.com/#/user/user1。使用 hashHistory 的時(shí)候，因?yàn)?url 中 # 符號(hào)的存在，從 /#/ 到 /#/user?name=zhangsan 瀏覽器并不會(huì)去發(fā)送一次 request，react-router 自己根據(jù) url 去 render 相應(yīng)的模塊。

browserHistory

如果設(shè)為 browserHistory，瀏覽器的路由就不再通過 Hash 完成了，而顯示正常的路徑：example.com/some/path，背后調(diào)用的是瀏覽器的 History API。

使用 browserHistory 的時(shí)候，瀏覽器從 / 到 /user 是會(huì)向 server 發(fā)送 request 的。所以 server 端是要做特殊配置的；否則用戶直接向服務(wù)器請(qǐng)求某個(gè)子路由，會(huì)顯示網(wǎng)頁找不到的 404 錯(cuò)誤。

import { browserHistory } from 'react-router'
render(
 <Router history={browserHistory} routes={routes} />,
 document.getElementById('app')
)

ReachRouter

Reach Router 也提供了 Router 與 Link 組件，和 React Router 不同，它將直接將對(duì)應(yīng)的組件寫在 Router 組件下，而不是，這么做無疑大大簡(jiǎn)化了邏輯。

import { React } from "react"
import { render } from "react-dom"
import { Router, Link } from "@reach/router"
let Home = () => <div>Home</div>
let Dash = () => <div>Dash</div>
render(
 <Router>
  <Home path="/" />
  <Dash path="dashboard" />
 </Router>
)

Reach Router 的參數(shù)接收方法就好像是直接給這個(gè)組件傳遞了參數(shù)的 Props 一樣，比 React Router 方便很多。

<Home path='/user/:id'>
const Home = ({id})=>{
  return (
    <span>{id}</span>
  )
}

Reach Router 渲染有一個(gè)策略，一個(gè)路由下只會(huì)渲染一個(gè)最符合條件的路由。

嵌套路由

render(
 <Router>
  <Home path="/" />
  <Dash path="dashboard">
   <Invoices path="/invoices" />
   <Team path="team" />
  </Dash>
 </Router>
)
const NotFound = () => (
 <div>Sorry, nothing here.</div>
)
render(
 <Router>
  <Home path="/" />
  <Dash path="dashboard">
   <DashboardGraphs path="/" />
   <InvoiceList path="invoices" />
  </Dash>
  <NotFound default />
 </Router>
)

到此這篇關(guān)于React router基礎(chǔ)使用方法詳解的文章就介紹到這了,更多相關(guān)React router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論