React-Router-DOM 4.x 的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baidu_36065997/article/details/81540241

相关知识点

1. React-Router 和 React-Router-DOM

• React-Router

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

• React-Router-DOM

React-Router-DOM 提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-Router-DOM。

2. HashRouter 和 BrowserRouter

• HashRouter
  url中会有个#，例如localhost:3000/#，HashRouter就会出现这种情况，它是通过hash值来对路由进行控制。如果你使用HashRouter，你的路由就会默认有这个#。

  <HashRouter>
  <Route path = '/' component={home}></Route>
  </HashRouter>

• BrowserRouter
  很多情况下我们则不是这种情况，我们不需要这个#，因为它看起来很怪，这时我们就需要用到BrowserRouter。

• Route
  Route是路由的一个原材料，它是控制路径对应显示的组件。我们经常用的是exact、path以及component属性。
  exact控制匹配到/路径时不会再继续向下匹配，path标识路由的路径，component表示路径对应显示的组件。

3. Link和NavLink的选择

两者都是可以控制路由跳转的，不同点是NavLink的api更多，更加满足你的需求。

• Link
  主要API是to，to可以接受string或者一个object，来控制url。

• NavLink
  它可以为当前选中的路由设置类名、样式以及回调函数等

• match
  match是在使用router之后被放入props中的一个属性，在class创建的组件中我们需要通过this.props.match来获取match之中的信息。

4. Switch

Switch常常会用来包裹Route，它里面不能放其他元素，用来只显示一个路由。

相关示例

最终效果

目前只能利用多个Link来解决路由嵌套的问题，所以to会存在两个/user的情况，第一种情况是点击大的User会跳转到相应/user界面；第二种情况是点击 User1 的时候会跳转到相应的/user界面。（这个目前我的学习还没有找到关于路由嵌套很好的办法，因为要展示的效果是一个 li 元素下面能够展开 ul 元素里面的内容）

下面是界面展示：

路由嵌套

如下所示的代码，如果采取动态路由，User后面的路由User1、User2、User3无法像上述一样放在User的下面，并且界面一开始展示的时候需要选择具体的路由才能展示相应的结果。