react路由的使用详细说明

路由的使用

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令
<HashRouter>
    <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/detail" component={Detail}/>
    </Switch>
</HashRouter>

外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面
react-router-dom就是通过“/:”去匹配url传递的参数

eg:<Route exact path="/detail/:id" component={Detail}/>

1、React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括：

react-router React Router 核心
react-router-dom 用于 DOM 绑定的 React Router
react-router-native 用于 React Native 的 React Router
react-router-redux React Router 和 Redux 的集成
react-router-config 静态路由配置帮助助手

2、引入插件
react的使用中，一般要引用react和react-dom两个包。但是react-router和react-router-dom只需要引用其中一种即可，不同之处在于后者比前者多了这样的DOM类组件。

3、主要的组件介绍

• Router

在 React Router 4 中，你可以将各种组件及标签放进 组件中，他的角色也更像是 Redux 中的 。不同的是是用来保持与 store 的更新，而是用来保持与 location 的同步。
Router是所有路由组件共用的底层接口，一般我们的应用并不会使用这个接口，而是使用高级的路由：
<BrowserRouter>：使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；
<HashRouter>：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；
<MemoryRouter>：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)；
<NativeRouter>：为使用React Native提供路由支持；
<StaticRouter>：从不会改变地址；

注意：组件下只允许存在一个子元素，如存在多个则会报错。

- Route

Route组件主要的作用就是当一个location匹配路由的path时，渲染某些UI。

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

// 如果应用的地址是/,那么相应的UI会类似这个样子：

<div>
  <Home/>
</div>

组件有如下属性：
path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；
strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname

同时，新版的路由为提供了三种渲染内容的方法：
：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染；
：这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便；
：与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用；

eg:// 行内渲染示例
<Route path="/home" render={() => <div>Home</div>}/>

// 包装/合成

const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props}/>
    </FadeIn>
  )}/>
)

<FadingRoute path="/cool" component={Something}/>

注意：<Route component>的优先级要比<Route render>高，所以不要在同一个<Route>中同时使用这两个属性

• Link

组件属性：
to（string/object）：要跳转的路径或地址；
replace（bool）：为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址；为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false；
// Link组件示例

// to为string
<Link to="/about">关于</Link>

// to为obj

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

// replace 
<Link to="/courses" replace />

• NavLink

<NavLink>是<Link>的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数，组件属性：
activeClassName（string）：设置选中样式，默认值为 active；
activeStyle（object）：当元素被选中时, 为此元素添加样式；
exact（bool）：为 true 时, 只有当地址完全匹配 class 和 style 才会应用；
strict（bool）：为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线；
isActive（func）：判断链接是否激活的额外逻辑的功能；

// activeClassName选中时样式为selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

// 选中时样式为activeStyle的样式设置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

// 当event id为奇数的时候，激活链接

  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

• Switch

该组件用来渲染匹配地址的第一个<Route>或者<Redirect>。
<Switch>的独特之处是独它仅仅渲染一个路由。相反地，<Route>每一个包含匹配地址(location)的<Route>都会被渲染

<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果现在的URL是/about，那么<About>, <User>, 还有<NoMatch>都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个<Route>组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

如果我们处于/about，<Switch>将开始寻找匹配的<Route>。<Route path="/about"/>将被匹配， <Switch>将停止寻找匹配并渲染<About>。同样，如果我们处于/michael，<User>将被渲染。