React-router 复习

官方文档：https://reacttraining.com/react-router/web/guides/philosophy

React-router

React-router和React-router-dom

• React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

• React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，所以在开发过程中，我们更多是使用React-router-dom。

HashRouter和BrowserRouter

它们两个是路由的基本，就像盖房子必须有地基一样，我们需要将它们包裹在最外层，我们只要选择其一就可以了。现在讲它们的不同：

• HashRouter：使用HashRouter的路由就会默认有个#。HashRouter是通过hash值来对路由进行控制。
• BrowserRouter：原理是使用HTML5 history API (pushState, replaceState, popState)来使你的内容随着url动态改变的，

Link和NavLink

将其想象成a标签，实际渲染到页面的后也就是一个a标签
这两个组件来产生url，主要参数是to，参数是一个字符串或者是一个对象。通过exact可以阻止匹配到对象后继续向下进行匹配。

注意：url去匹配路由的时候一定是一个从上到下遍历匹配Route的过程，由Route去匹配url，只有url完全符合Route的path要求的时候才会渲染Route对应的组件。所以是先有url，再有组件的渲染。

Route常用属性：

exact、path以及component属性
Route会向component组件传一个参数，包含属性match，location，history。match属性对象又包含url，path，params等属性。比较常用的就是match的url属性，可以继续基于url指定组件里面的Link标签要链接到的url，从而显示对应的组件。

Route写在哪里，当Route匹配到URL的时候，相应的组件就会在那里进行渲染。component，render，children，Route的这三个属性写一个就行，不能同时都写。precendence order： component > render > children.

注意：children中的元素不管是否匹配到URL都会渲染，不过没有匹配到的Route向children的函数中传的值是null，只有匹配到的时候才会有值。

所以使用children属性可以用来实现网站的导航栏。选中其中一项的时候就和其他的元素有不同的样式，这可以通过控制一个类的存在与否进行控制。

横向导航栏：使用Routed 的 children属性。
侧边菜单栏：左边是Link，右边把Route写在右边展示区域的div里面，匹配到的时候进行渲染。

• 当Route的path中出现了”:”的时候，那么”:“后面跟的就是一个参数，这个参数会随着match对象的params属性传给对应的组件。

• 一个url可能会匹配到多个Route，如果只想要匹配到一个Route，那么就把所有的Route写在<Switch>里面，然后当url匹配到了一个Route后就不会继续向下面匹配。

• <Redirect />组件用在Route组件的render方法里面作为返回值来实现重定向。在用户登录的时候一般会用来实现用户没有登录的时候进行跳转。

注意：路由Route和Link一定是在一个组件里面。所以在渲染一个有Link的组件的时候也一定要有Route组件。Route始终和Link在一起，有Link的地方必然有Route组件。

Route向component组件进行参数传递

Route向component组件进行参数传递时的解构赋值：

组件：
const Topics = ( {match} ) => (）
路由：
<Route path="/topics" component={Topics}/>
路由Route向组件传的参数：
{history:{},
location:{},
match:{}}.
执行到 const Topics = ( {match} ) => ()的时候会将参数对象
赋值给对象{match}，所以此时组件实际接受的参数只有match对象。

路由配置：

（当通过一个数组产生很多的组件的时候每个组件都需要有一个key属性来让React区别开每一个元素）

当路由比较复杂和有很多的子路由的时候，一般先把路由配置好，然后再通过一个组件封装Route循环生成Route组件。

路由配置：

---

const routes = [
  { path: '/sandwiches',
    component: Sandwiches
  },
  { path: '/tacos',
    component: Tacos,
    routes: [
          { path: '/tacos/bus',
            component: Bus
          },
          { path: '/tacos/cart',
            component: Cart
          }
    ]
    }]

将Route封装起来，在添加子路由实现路由嵌套的时候很有用。

const RouteWithSubRoutes = (route) => (
  <Route path={route.path} render={props => (
    // 通过参数实现路由嵌套
    <route.component {...props} routes={route.routes}/>
  )}/>
)

组件Tacos，传入routes参数，在调用封装的<RouteWithSubRoutes />组件实现路由的嵌套：

const Tacos = ({ routes }) => (
  <div>
<h2>Tacos</h2>
<ul>
  <li><Link to="/tacos/bus">Bus</Link></li>
  <li><Link to="/tacos/cart">Cart</Link></li>
</ul>

{/*添加路由*/}
{routes.map((route, i) => (
  <RouteWithSubRoutes key={i} {...route}/>
))}

最外层的组件：

const RouteConfigExample = () => (
  <Router>
<div>
  <ul>
    <li><Link to="/tacos">Tacos</Link></li>
    <li><Link to="/sandwiches">Sandwiches</Link></li>
  </ul>

  {routes.map((route, i) => (
    <RouteWithSubRoutes key={i} {...route}/>
  ))}
</div>

)

react native 和 react 的不同之处：

1. this.props.children：是react和react native的一个不同之处，react native 没有children的属性。
2. 代码当中，组件的名字在React native 里面调试的时候，Image哈市Image，Text是还Text，但是React 里面渲染到页面后就会转化为html对应的标签。Link–>a,

ReactDOM.render():这里面就是最终渲染到页面上的东西，一般是一个路由组件，这是整个应用程序的入口组件。ss

npm install

npm install之后发生了什么？？

npm 全名Node Package Manager，npm完全用JavaScript写成。

npm：是一个模块（包）管理工具，在安装node环境的时候随着node一起安装在环境中，然后该工具就可以在命令行里面使用。

为什么命令行工具能够识别命令？？命令是什么？?

命令其实就是一个应用程序的名字，执行命名其实就是执行相应的应用程序。

命令行工具是怎么去找到对应的应用程序？？

通过系统环境中的path变量去找，一个路径一个路径的去找，直到找到对应的应用程序。然后就可以触发应用程序开始执行。

npm工具会到npm服务器上下载别人写的第三方包到自己的本地

在用npm下载react或者react native 脚手架的时候，其实这些脚手架是被人当做包传到npm上，所以才能通过npm install的形式下载到自己的本地。

<Prompt />:用法在一个组件里面，当页面离开当前组件的时候根据状态state发出提醒。