react-router的改变（下）

(这里的Router组件都表示BrowserRouter组件)

二）Route组件：

定义：寄居在路由器内的路由组件；

语法：<Route props methods />

参数解释：

methods：

1）component：外导组件

     语法：<Route path  component={组件} />

2）render：内联组件，路由组件自身渲染；

     语法：<Route path render={()=>{ ... return 组件}}

props：

1）path：String，识别的路由路径；

2）exact： Boolean，若为true，则如path=/A”,不能匹配"/A/B";

3）strict：Boolean，若为true，则path=‘’/A/“，不能匹配“/A”；

三）Link组件：

定义：必须寄居在路由器中，负责导航；

语法：<Router>

               <Link to replace />

           </Route>

参数解释：

to：String 或者Object；

replace：Boolean；

四）NavLink组件：

定义：Link  组件的特殊版，当被激活时，添加激活时的样式；

语法：<Router>

               <NavLink activeClassName或者 activeStyle exact strict isActive />

           </Router>

 参数解释：

 :被激活时自动添加的样式,String

activeStyle: 同上，Object

isActive:被激活时的执行函数,Func

四）Switch组件

定义：只渲染第一个与当前路径匹配的<Route>或者<Redirect>;

语法：<Router>

         <Switch>

              <Route />

              <Route />

           </Switch>

       </Router>

五）Redirect组件：

定义：点击被重定向的路径时，会自动跳转到指定的路径，（作为一个中转站）；

语法：<Redirect from to push />

参数解释：

from：被重定向的url（String）

to：指定的url（String或者location对象）

push：Boolean，true时，会在历史记录中覆盖原来的记录，而且不能回退；

eg：<Router>

          <Link to="/old">

          <Link to="/new">

          <Route path="/new" component={A} />

          <Redirect from="/old"  to="/new" />

    <Router>

六）Prompt组件

定义：离开当前路由时，做出一些提示信息；

语法：<Prompt message when />

参数解释：

message：String或者Function

when：Boolean，是否采用Prompt组件