react-router Q & A

什么是React 路由？

React 路由是一个构建在 React 之上的强大的路由库，
它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。
它负责维护标准化的结构和行为，并用于开发单页 Web 应用。

为什么React Router v4中使用 switch 关键字 ？

官方文档说明: Switch 只渲染到第一个匹配的 <Route> 或 <Redirect>.
React-Router v4之后官方不再推荐层次嵌套匹配的写法, 而是希望我们更多的使用较为扁平的风格来写 routes, 这样逻辑更为清晰, 便于维护

const Init = (
  <HashRouter>
    <HomeLayout />
    <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/user/add" component={UserAdd} />
        <Route exact path="/book/add" component={BookAdd} />
        <Route exact path="/login" component={Login} />
    </Switch>
  </HashRouter>
);
const HomeLayout = (
  <ul>
    <li><Link to="/" >Home</Link></li>
    <li><Link to="/user/add" >UserAdd</Link></li>
    <li><Link to="/book/add" >BookAdd</Link></li>
    <li><Link to="/login" >Login</Link></li>
  </ul>
);

为什么我们需要react路由

react-router实现无刷新的条件下切换显示不同的页面。
路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。
通过前端路由可以实现单页（SPA)应用。
所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图
SPA的理解
1）单页web应用（single page web application，SPA）
　　　　SPA应用和非SPA应用的区别：
　　　　点击链接后：非SPA页面--->跳转到另一个页面
　　　　　　　　　　SPA页面--->更新（局部刷新）
　　2）整个应用只有一个完整的页面
　　3）点击页面中的链接不会刷新页面，本身也不会向服务器发请求
　　4）点击路由链接时，只会做页面的局部更新
　　5）数据都需要通过ajax请求获取，在前端异步展现

列出 React Router 的优点。

就像React是基于组件的一样，在React Router v4中，API是“所有关于组件的”。router可以被可视化为一个单独的根组件<BrowserRouter>，其中我们包含了特定的子路由<route>。
不需要手动设置历史值:在React Router v4中，我们所需要做的就是在组件中包装路由。
这些包是分开的:三个包，分别用于Web、Native和Core。这支持应用程序的紧凑大小。基于类似的编码风格很容易切换。

50. React Router与常规路由有何不同？

image.png