关于react路由以及路由嵌套和vue中路由嵌套的区别

关于react路由以及路由嵌套和vue中路由嵌套的区别

react的路由模块

• react中内置没有路由模块，我们使用第三方库来使用路由（react-router）
• 这个react-router有三种形式
  使用在pc端的react-router 还有在web上使用的react-router-dom以及在react-native上面使用的react-router-native(也有的说法是react-router3.0的版本是react-router，4.0版本的是react-router-dom)

react-router

• react-router中的组件分为三种一种是

1. 路由器 像<Router><Router> <BrowserRouter>和 <HashRouter>
2. 路由匹配器 <Route>和<Switch>
3. 路由导航 <Link>，<NavLink>和<Redirect>

• 通常我们使用react-router的时候，需要把顶级元素放在路由器里面,然后我们在导航中写入不同的路由导航，然后在路由匹配器中放入不同的路由，让其根据url的改变匹配不同的路由。

  <BrowserRouter>
      <App />
    </BrowserRouter>
   return(
    <div>这是一个div
         <ul>
             <Link to="/login">登录</Link>
             <Link to="/register">注册</Link>
         </ul>
         <div>
             <Switch>
                 <Route path="/login"><Login></Login></Route>
                 <Route path="/register"><Register></Register></Route>
             </Switch>
         </div>
     </div>
     )   
  

react-router-dom中的 BrowserRouter和 HashRouter的区别

• BrowserRouter使用常规的URL路径。这些通常是外观最好的URL，但是它们要求正确配置服务器。具体来说，您的Web服务器需要在所有由React Router客户端管理的URL上提供相同的页面
• HashRouter将当前位置存储在URL 的hash一部分中，因此URL看起来像http://example.com/#/your/page。由于哈希从不发送到服务器，因此这意味着不需要特殊的服务器配置

Link 和NavLink的区别

• NavLink是特殊版本Link，它将在与当前URL匹配时将样式属性添加到呈现的元素。

Switch 和 Route这两个标签的配合使用

• 在路由匹配过程中即使没有switch标签包裹，也能进行路由匹配。但是会导致一种情况就是，在不使用switch的使用，则其中的Route在路径相同的情况下全都会匹配。更严重的是，还会匹配上级路径的
• 有Switch标签，则其中的Route在路径相同的情况下，只匹配第一个，这个可以避免重复匹配

在路由中使用参数问题

• 我们可以使用props看到一些数据

	{history: {…}, location: {…}, match: {…}, staticContext: undefined}

	history: {length: 50, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
	location: {pathname: "/login/mima/8", search: "", hash: "", state: undefined, key: "ctasis"}
	match: {path: "/login/mima/:id", url: "/login/mima/8", isExact: true, params: {…}}

• 我们可以通过 props.match访问到里面的数据（包括我们通过url传递过来的参数）

关于react-router中路由嵌套问题

• 在react中使用路由嵌套的时候，我们只需要把每一个路由组件写好，然后在需要路由跳转的时候，添加Link标签，添加匹配规则就行了

关于vue中的路由嵌套问题