React router基础使用方法有哪些

这篇“React router基础使用方法有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“React router基础使用方法有哪些”文章吧。

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 属性指定路由的匹配规则。

<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 的一个部分，直到遇到下一个/、?、#为止。

// 匹配 /hello/michael

// 匹配 /hello/ryan

<Route path="/hello(/:name)"> // ()表示 URL 的这个部分是可选的。

// 匹配 /hello

// 匹配 /hello/michael

// 匹配 /hello/ryan

<Route path="/files/*.*"> // *匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。

// 匹配 /files/hello1.jpg

// 匹配 /files/hello2.html

<Route path="/files/*"> 

// 匹配 /files/a

// 匹配 /files/a/b

<Route path="/files/**"> // ** 匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。

// 匹配 /files/a

// 匹配 /files/indexa

3、histroy 属性

Router 组件的 history 属性，用来监听浏览器地址栏的变化，并将 URL 解析成一个地址对象，供 React Router 匹配。

history 属性，常用的 2 种：

(1).hashHistory

如果设为 hashHistory，路由将通过 URL 的 hash 部分（#）切换，URL 的形式类似 example.com/#/user/user1。使用 hashHistory 的时候，因为 url 中 # 符号的存在，从 /#/ 到 /#/user?name=zhangsan 浏览器并不会去发送一次 request，react-router 自己根据 url 去 render 相应的模块。

browserHistory

如果设为 browserHistory，浏览器的路由就不再通过 Hash 完成了，而显示正常的路径：example.com/some/path，背后调用的是浏览器的 History API。

使用 browserHistory 的时候，浏览器从 / 到 /user 是会向 server 发送 request 的。所以 server 端是要做特殊配置的；否则用户直接向服务器请求某个子路由，会显示网页找不到的 404 错误。

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

ReachRouter

Reach Router 也提供了 Router 与 Link 组件，和 React Router 不同，它将直接将对应的组件写在 Router 组件下，而不是，这么做无疑大大简化了逻辑。

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 的参数接收方法就好像是直接给这个组件传递了参数的 Props 一样，比 React Router 方便很多。

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

Reach Router 渲染有一个策略，一个路由下只会渲染一个最符合条件的路由。

嵌套路由

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>
)

以上就是关于“React router基础使用方法有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。