React Router 中文文档 2.基本组件

基本组件 (Basic Components)

React Router 提供三种类型组件，分别是路由组件(router components)，路由匹配组件(route matching components)，以及导航组件(navigation components).

你使用以上的任何一个组件都必须要引入一个名为 react-router-dom 的文件

import { BrowserRouter, Route, Link } from 'react-router-dom'

2.1 路由 (Routers)

任何一个核心路由APP（REACT ROUTER APPLICATION）都必须为一个路由组件。对于web工程，react-router-dom 文件提供了 和 路由组件。 他们两个都会为你创建一个专门的 history 对象。一般来讲，你的服务器只是一个回应请求的服务器，那么更多使用的是，但如果你的服务器是静态文件服务器，那么你可以使用

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  
    
  
), holder)

2.2 路由匹配（Route Matching）

我们提供了两种路由匹配组件，它们分别是： 和 .

import { Route, Switch } from 'react-router-dom'

路由匹配通过比较组件的PATH属性和本地路径的pathname 来完成工作。当一个 匹配到对应路径，他会渲染(render) 对应路径的内容，然而当它没有匹配到对应路径是，会渲染null。 一个没有提供path属性的 将始终被渲染

// when location = { pathname: '/about' }
 // renders 
 // renders null
 // renders 

你可以在任何你想要根据位置渲染的内容中去包含 组件。列出并排列多个可能的组件通常会很有用。 组件用于组合一系列组件。

当然 对于组合 并不是必须的，也就是说我们并不一定需要组合，但是这是一个非常有用的组件。 组件会遍历所有元素，并且只渲染最先与本地路径相匹配的元素。这对于多个route组件路径匹配同一个路径，或者当动画在两个组件中过度，或者识别到对于本地路径没有路由路径与之匹配的时候(这时你可以渲染一个 404 组件)会非常有帮助

  
  
  
  {/* when none of the above match,  will be rendered */}
  

2.3 路由渲染参数

你可以有三个参数来选择你该如何渲染给出的组件，分别是：component， render， 和 children。 你可以查看 documentation来了解以上三个参数的更多信息，但是在这里， 我们将主要讲 component 和 render 方法，因为他们是两个最主要的方法，也是最常用的。

component 作用于你想要渲染的已经存在的组件(可以是 react.component ，也可以是无状态组件(pure function)）。render 方法提供一个内部函数，当你想要对将被渲染的组件
传入内部变量的时候，你需要使用这个方法。 你不应该对component方法传入内部变量，因为component会有两个多余的方法 unmounts / remounts。

const Home = () => 
Home

const App = () => {
  const someVariable = true;
  
  return (
    
      {/* these are good */}
      
       }
      />
      {/* do not do this */}
       }
      />  
    
  )
}

2.4 导航

REACT ROUTER 提供组件，它在你的app内部创建一个链接(link)，无论你在哪里渲染了，它都会被渲染成html的锚点元素

Home
// Home

是一个特殊类型的，当该元素被点击的时候会激活"active"样式(提供了activeClassName属性)。

// location = { pathname: '/react' }
React
// React

在任何时候，如果你想要强制导航，那么你可以渲染一个。当一个元素被渲染时，它会根据该元素下的"to"属性，导航到指定路径。

Redirect to='/login'/>