电脑配置|硬件知识|电脑故障|电脑技巧|电脑应用|组装电脑

关于react-router的几种配置方式详解

本文介绍关于react-router的几种配置方式详解,分享给大家,具体如下:

路由的概念

路由的作用就是将url和函数进行映射,在单页面应用中路由是必不可少的部分,路由配置就是一组指令,用来告诉router如何匹配url,以及对应的函数映射,即执行对应的代码。

react-router

每一门JS框架都会有自己定制的router框架,react-router就是react开发应用御用的路由框架,目前它的最新的官方版本为4.1.2。本文给大家介绍的是react-router相比于其他router框架更灵活的配置方式,大家可以根据自己的项目需要选择合适的方式。

1.标签的方式

下面我们看一个例子:

import { IndexRoute } from 'react-router'

const Dashboard = React.createClass({
 render() {
  return <div>Welcome to the app!</div>
 }
})

React.render((
 <Router>
  <Route path="/" component={App}>
   {/* 当 url 为/时渲染 Dashboard *