React:快速上手(6)——掌握React Router
React:快速上手(6)——掌握React Router
引入Router
安装
npm install react-router-dom
基础组件
React Router中有三种类型的组件:路由器组件、路由匹配组件和导航组件。
路由器组件:Router
每个React Router应用程序的核心应该是路由器组件。对于Web项目,react-router-dom提供了两种类型的路由器:
- <BrowserRouter>
- <HashRouter>
一般来说,如果您有响应请求的服务器,则应使用<BrowserRouter>,如果使用静态文件服务器,则应使用<HashRouter>。
import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, holder );
BrowserRouter 和 HashRouter 都可以实现前端路由的功能,区别是前者基于url的pathname段,后者基于hash段,比如:
- 前者:http://127.0.0.1:3000/article/num1
- 后者:http://127.0.0.1:3000/#/article/num1(不一定是这样,但#是少不了的)
他们的区别是,在页面刷新后会将当前路由发送到服务器,后者不会,因为是Hash段。
关于Hash段:
在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。所以,使用HashRouter可以方便我们与后端集成,不然发送路由信息,服务器还需要针对处理!
路由器匹配组件:Route、Switch
有两个路由匹配组件:<Route>和<Switch>。我们在<Route>里面需要定义两个属性:
<Route path='/about' component={About}/> //path:待匹配的路径 //component:待显示的组件
当<Route>匹配时,它将呈现其内容,当它不匹配时,它将呈现为null。没有路径的<Route>将始终匹配。<Route>通常与<Switch>一起使用,这样使得,一组Route只会显示最满足条件的一个:
<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>
导航组件:Link、NavLink、Redirect
React Router提供可一个<Link>组件来在你的应用中创建超链接,其实它将被渲染为一个<a/>。<NavLink>是一种特殊的超链接,他可以设置激活样式,比如下面设置了激活时的class。
<NavLink to="/faq" activeClassName="selected"> FAQs </NavLink>
当然,你也可以直接在里面写好
<NavLink to="/faq" activeStyle={{ fontWeight: "bold", color: "red" }} > FAQs </NavLink>
手动控制路由跳转
通过基础组件的调用,我们可以实现基础路由及导航。同时也可以在代码中实现更加灵活的路由跳转。
关于History对象
history是React Router提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航,这种对于单页应用至关重要的功能。
如下图所示是history对象的数据结构:
其中的一些字段和函数的具体含义,我们可以通过访问https://segmentfault.com/a/1190000010251949来获取更多!
在React Router中的实现
首先,需要导入withRouter
import { withRouter } from "react-router-dom";
接着,history来压入路径
handleClick = (e) => { .... this.props.history.push('/cam') .... }
最后,将当前组件进使用withRouter加工,生成高阶组件
export default withRouter(MSLoginForm);