Raect Router 4 的使用 (1)

本文来自于官方文档，属于意译而非直译

基本组件

React Router 有三种类型的组件，分别是：react-router、react-router-dom、react-router-native

你在web 程序中使用了路由组件，那你就应该引入 react-router-dom：

import { BrowserRouter, Route, Link } from 'react-router-dom'

路由

React Router 应用程序的的核心是路由组件。对于 web 项目，react-router-dom 提供了 <BrowserRouter> 和 <HashRouter> 路由。这两种方法都专门创建了 history 对象。一般来说，

如果你有一个响应请求的服务器，你应该使用 <BrowserRouter> 路由；如果你使用的是静态文件服务器，你应该使用 <HashRouter> 路由。

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((<BrowserRouter><App/></BrowserRouter>
), holder)

路由组件无法接受两个及两个以上的子元素，看一下我自己写的

ReactDom.render((<HashRouter history={hashHistory}><Switch><Route exact path="/" component={App}/><Route path="/repos" component={Repos}/><Route path="/about" component={About}/></Switch></HashRouter>
),document.getElementById('app'))

在这接受的是一个 switch 子元素。其实还可以这样写：

const RoutersComponent = ()=>(<Switch><Route exact path="/" component={App}/><Route path="/repos" component={Repos}/><Route path="/about" component={About}/></Switch>
)ReactDom.render((<HashRouter history={hashHistory}><RoutersComponent /> </HashRouter>
),document.getElementById('app'))

其实这个就和官方的例子没有什么区别了

路由匹配

这里有两种路由匹配组件：<Route> 和 <Switch>

import { Route, Switch } from 'react-router-dom'

路由匹配是通过比较一个 <Route> 的路径和当前位置的路径名来完成的。当一个 <Route> 匹配时将渲染匹配到的内容，如果不匹配是将不会渲染。一个<Route> 没有 path，那它总是匹配的

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

你可以在你想要渲染内容的位置包含一个 <Route>，但是将 <Route> 放在一起是很有意义的。用 <Switch> 组件将 <Route> 组合在一起：

<Switch><Route exact path='/' component={Home}/><Route path='/about' component={About}/><Route path='/contact' component={Contact}/>
</Switch>

<Switch> 将 <Route> 组合在一起不是必须的，但是是非常有用的。<Switch> 将迭代所有的子元素 <Route> 并且只渲染当前位置匹配的第一个。当多个路径匹配到相同的路径名时，这是非常有帮助的。当在路径之间进行动画转换时，在确定没有路径匹配到当前位置时(你可以呈现404)

<Switch><Route exact path='/' component={Home}/><Route path='/about' component={About}/><Route path='/contact' component={Contact}/>{/* when none of the above match, <NoMatch> will be rendered */}<Route component={NoMatch}/>
</Switch>

解释一下 “只渲染匹配到的第一个” ：（http://localhost:8081/#/repos）

<Switch><Route exact path="/repos" component={App}/><Route path="/repos" component={Repos}/><Route path="/about" component={About}/>
</Switch>

在这里你只可以看到 App 的内容，看不到 Repos 的内容，因为 App 是匹配到的第一个

更多专业前端知识，请上【猿2048】www.mk2048.com

Raect Router 4 的使用 (1)相关推荐

React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
this.$router.push、replace、go的区别
1.this.$router.push() 描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面. 用法: 2.this.$router.replace() ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
hitchhiker部署_Hitchhiker的React Router v4指南：无限远的递归路径！
hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
四 Vue学习 router学习
index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...
Express4.x API (四)：Router (译)
Express4.x API 译文系列文章 Express4.x API (一):application (译) -- 完成 Express4.x API (二):request (译) -- 完成 ...
[React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a "dirty" state and we want t ...

Raect Router 4 的使用 (1)

Raect Router 4 的使用 (1)相关推荐

最新文章

热门文章