Day17 React-Router(二)Route设置进阶

讲完最基础的Route设置之後，
来学习如何更准确的经由path来渲染画面上的元件。

Route标签属性

Route标签里面得属性除了path、component以外还有以下属性

exact：

加上exact，url路径一定要和path完全相同，才会渲染component指定的元件

<Route exact path="/home" component="Home" />
//如果url为"/home/1"，将不会渲染Home元件

<Route path="/home" component="Home" />
//url为"/home/1"，会渲染Home元件

strict：

在有exact的情况下搭配使用，检查url的斜线是否也和path完全相同，让url和path的匹配更严谨。

<Route strict exact path="/home" component="Home" />
//如果url为"/home/"，将不会渲染Home元件

<Route exact path="/home" component="Home" />
//url为"/home/"，会渲染Home元件

sensitive：

url和path的大小写必须完全相符才会渲染元件。

<Route sensitive path="/Home" component="Home" />
//如果url为"/home"，将不会渲染Home元件

<Route path="/Home" component="Home" />
//url为"/home"，会渲染Home元件

render：

可以利用render属性直接将要渲染的JSX写入route标签中，进入这个route後便会直接渲染内容。

<Route path='/home' render={()=><h1>利用render写入</h1>} />

Redirect标签属性

Redirect用於将url强制将画面重定向到某个path的画面。
和Route一样可以放在Switch标签之中。

记得引入档案！（{ }里越来越多东西了...）

import {  Route, Switch , Redirect } from 'react-router-dom';

来看怎麽设定属性

to：

必要属性，指定要重新导向的路径。

<Route  path='/home' component={Home} />
<Route  path='/1' component={One} />

<Redirect to="/home" />
//url如果没有找到匹配的path就会将页面导向'/home'
//例如:在url输入'/1'、'/333'後，url会自动变成'/home'将你导向渲染Home的页面

from：

from属性只有当**Redirect在**Switch标签中和to一起时可以使用，

当url和from相符时，便会转向to指定的路径。

<Switch>
          <Redirect from='/3' push to="/home" />
          <Route  path='/home' component={Home} />
          <Route  path='/1' component={One} />
          <Route  path='/2' component={Two} />                 
 </Switch>

另外Redirect也和Route一样有exact、strict、sensitive属性和from搭配使用，
负责检查url和from的匹配条件。