React:快速上手(6)——掌握React Router

react

引入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);

 

以上是 React:快速上手(6)——掌握React Router 的全部内容, 来源链接: utcz.com/z/383281.html

回到顶部