React-router 总结

React-router

1.基本写法

history={hashHistory} 表示路由的切换有URL的hash决定，即路由的变化是#号后面的内容发生变化。用户访问dev.jd.com 的时候，其实访问的是dev.jd.com/#/。会自动定位到dev.jd.com/#/。

2.嵌套路由

用户访问/repos时，会先加载app组件，然后在app内部在加载repos组件。

3.path属性

Route组件的path属性指定路由的匹配规则。

4.exact属性 switch 组件

在没有switch和exact的情况下，假如路由中有‘/a’，就会匹配两个组件，‘/’和‘/a’，页面中会同时显示两个组件。 假如路由中有‘/b’，只会匹配‘/’，因为‘/b’中包含‘/’。 switch作用： switch 是为了解决route的唯一渲染出现的，只会匹配符合规则的第一个路由。 假设路由中存在‘/a’,则会自动匹配第一个组件,并且不会再继续匹配。

react路由会匹配到所有能匹配的组件，比如‘/a’会匹配到两个组件，‘/’和‘/a’
为了实现严格的匹配，我们加上exact布尔值，实现严格匹配。

5.redirect组件

Redirect一定要放在switch的最后面，当前面的路由都没有匹配到的话，会重定向到根目录。

6.react.Suspense

<React.Suspense fallback={

}>






</React.Suspense>

如果路由中有懒加载进来的组件，在组件渲染的时候会有延迟，所以我们使用React.Suspense来优化页面，在组件没有加载完成之前，会显示默认的内容。

7.IndexRoute

当访问跟路径时，不会加载任何子组件，因为App组件内部的this.props.children是undefined。这是我们需要为它指定一个默认显示的组件。

这样当我们访问根目录的时候，默认就会显示Home组件。IndexRoute没有path路径参数。

8.IndexRedirect组件

＜IndexRedirect to="/welcome" />

用于访问跟路由的时候，将自动重定向到某个子组件。

9 路由匹配原理
当一个给定的URL被调用时，整个集合中被命中的部分都会被渲染出来。React Router 会深度优先遍历整个路由配置寻找一个鱼给定的URL相匹配的路由。

相对路径和绝对路径的区别：

<Router>
    <Route path="/" component={App}>
      {/* 当 url 为/时渲染 Dashboard */}
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>

以上路径都是相对路径，如果要访问message组件，URL需要访问/inbox/messages/:id，如果我们想要脱离inbox访问message页面，可以使用绝对路径，这样访问message组件就可以直接访问/messages/:id。
存在的问题：改变路径之后，访问/inbox/messages/:id会看到一个错误的页面，我们可以使用重定向将其定向到message组件。

 <Route path="inbox" component={Inbox}>
        <Route path="/messages/:id" component={Message} />
        <Redirect from="messages/:id" to="/messages/:id" />
  </Route>

总结：如果路由使用了相对路径，那么完整的路由是由该路由所有的祖先节点的路径和自身指定的相对路径拼接而成。如果使用绝对路径，则可以完全忽略嵌套关系，直接访问绝对路径即可。

10 History
react router是建立在history的基础上的，
常用的history的形式有三种：
1）browserHistory
2) hashHistory
3）createMemoryHistory
browserHistory是使用React Router的应用推荐的history，它使用history API来处理URL，创建一个像example.com/a/path这样的真实的URL。但是当我们刷新页面时，服务器会收到来自example.com/a/path的请求，这个时候需要我们处理一下这个URL。

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// 通常用于加载静态资源
app.use(express.static(__dirname + '/public'))

// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

上面的代码是node，是后端对于URL的处理。加载静态文件（index.html）到服务端，并且将任何get请求都重定向到public/index.html文件。当我们访问index.html文件时，是访问服务端public文件夹下的index.html文件，但是如果我们访问index.html/a/b时，服务器端并没有找到该文件，只有index.html文件，其中包含js文件，router.js，找到匹配的路由，并显示相应的组件。

hashHistory完全是前端路由，使用URL中的#后面的部分去创建路由。

11.Link元素

当我们在各个页面跳转的时候，如果用a锚点元素，每次跳转都要重新刷新页面，页面重新加载，所以raect-router-dom提供了Link元素来避免发生这种情况。当点击Link元素时，url会发生变化，组件会重新渲染，但是页面不会刷新，不会重新加载。