React学习第七天（路由相关）

1.路由的严格匹配与模糊匹配

• 默认使用的是模糊匹配 (【输入的路径】要包含【匹配的路径】，且顺序要一致)

• 开启的是严格匹配加上exact <Route exact path="/hello" component={Hello}></Route>

• 严格匹配不要随意开启，需要再开启，有些时候开启会导致无法继续匹配耳机路由

2.Redirect的使用

• 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

• 具体使用方式：

          <Switch>
            <Route exact path="/hello" component={Hello}></Route>
            <Route path="/welcome" component={Welocome}></Route>
            {/* 默认重定向 */}
            <Redirect to="Hello"/>  
          </Switch>
  

3.嵌套路由

• 注册子路由时要写上父路由的path值
• 路由的匹配时按照注册路由的顺序进行的

4.向路由传递参数

1. params参数

   ​ 路由链接（携带参数）：

<MyNavLink to={`/hello/menu/${item.id}`}>{item.title}</MyNavLink>

​ 注册路由（声明接收）：<Route path="/hello/menu/:id" component={Menu} />

​ 接收参数： let {id}=this.props.match.params

2. search参数

   ​ 路由链接（携带参数）：<MyNavLink to={/hello/menu/?id=${item.id}}>{item.title}</MyNavLink>

   ​ 注册路由（声明接收）：<Route path="/hello/menu" component={Menu} />

   ​ 接收参数：

   let { search } = this.props.location;
   
   let {id} = qs.parse(search.slice(1));
   

   ​ 备注：获取的search是urllencoded编码字符串，需要借助querystring解析

3. state 参数

   ​ 路由链接（携带参数）：<MyNavLink to={{pathname:"/hello/menu",state:{id:item.id}}}>

   ​ 注册路由（声明接收）：<Route path="/hello/menu" component={Menu} />

   ​ 接收参数：

   let { id } = this.props.location.state;
   

   备注：刷新也可以使用

5.编程式路由导航

借助this.props.history对象上的API操作路由跳转，前进，后退

this.props.history.go()
this.props.history.goBack()
this.props.history.goForward()
this.props.history.replace()
this.props.history.push()

6.BrowserRouter与HashRouter的区别

1. 底层原理不一样

   • BrowserRouter使用的是H5的history API，不兼容IE9及以下版本
   • HashRouter是用的是url的哈希值

2. path的表现形式不一样

   • BrowserRouter路由地址中不带#号，例如：http:localhost:3000/text
   • HashRouter路由地址中带有#号,例如：http:localhost:3000/#text

3. 刷新后对路由state参数的影响

   • BrowserRouter不会有任何影响，因为state保存在history记录中
   • HashRouter刷新会导致state的参数丢失

4. 备注：HashRouter可以解决一些路径错误相关的问题