这篇“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,浏览器的路由就不再通过 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') )
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基础使用方法有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。