1、React-Router是什么?
它是react体系的一个重要部分,它通过管理URL,实现组件的切换和状态的变化,开发负责的应用几乎都会用到。
2、React-Router的基本用法
2.1、安装: cnpm install react-router;
2.2、router和route的关系:
router是react的一个组件,它本身只是一个容器,真正的路由要通过Route组件定义。在写路由的时候要先从react-router,导入所需的组件。
例如:
说明:
a、首先我们要从react-rooter中将我们要用到的组件导入进来,见图1中的第2行。
b、IndexRoute组件(见图1红色代码部分)
App组件下有两个子组件,分别为component1和component2组件。当我们访问/路径的时候,会直接加载component1。IndexRoute指定component1是根路由的子组件,即指定默认情况下加载的子组件。
c、IndexRoute组件没有路径参数path。
3、IndexRedirect组件
IndexRedirect组件用于访问根路由的时候,将用户重定向到某个子组件。
<Route path="/" component={App}>
<IndexRedirect to="./component1"/>
<Route path="component1" component={component1} />
<Route path="component2" component={component2} />
</Route>
代码中,用户访问根路径时,将自动重定向到子组件component1。
4、Link组件
Link组件用于取代<a>元素,生成一个链接,允许用户点击后跳转到另一个路由。它基本上是<a>元素的React版本,可以接收Router的状态。
render(){
return
<div>
<ul role="nav">
<li><link to="/component1">Component1</link></li>
<li><link to="/component2">Component2</link></li>
</ul>
</div>
}