Guide-2019-05-09-React Router 4.x官方文档翻译-基本组件

react-router中有三类组件：

• 路由组件（router components）
• 路由匹配组件（route matching components）
• 导航组件（navigation components.）
  上面三类组件都需要从react-router-dom中import导入

Routers

每个react-router应用的核心应该是router组件
对于web项目，react-router-dom提供来两种路由方式： 和
这两种路由都为你提供了特有的history对象
一般来说，如果你有响应请求的服务器，就应该使用
如果你使用静态文件服务，就应该使用

{* 表示使用BrowserRouter模式来使用Router *}
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
  
    
  
  holder
);

Route matching

有两种路由匹配组件：和

Route

通过比较组件的path属性与当前location的pathname来进行路由匹配，如果匹配成功，那就会在组件这个地方渲染component属性的组件内容；如果没有匹配成功，会渲染null。
如果组件没有path属性，将始终匹配，也就是始终会渲染指定的内容。
比如： // renders

(`location的pathname` 是指url地址域名后面的所有字符，
比如https://www.jianshu.com/writer, location.pathname == '/writer')

组件不能嵌套

Switch

我们不一定要用Switch来对进行分组，但是Switch很有用。
将迭代其所有子元素，并仅渲染与当前路由匹配的第一个子元素
当多个的路径匹配相同的路径名，动画路由之间的转换，以及识别何时没有路径与当前路由匹配时（这样您可以渲染“404”组件），这会有所帮助。

import { Route, Switch } from "react-router-dom";

          {* renders  *}
      {* renders null*}
                       {* renders *}


  
  
  


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

Route Rendering props

使用组件渲染其他组件，你可以有三个属性可以设置渲染的组件：component, render, children
可阅读API->Route查阅详细信息
这里只关注component和render,因为它们会被经常使用。
component属性：用来渲染已经存在的组件(不管是从React.Component继承的组件还是无状态的函数组件)
render属性： 是一个内联函数，仅仅在你想要给你想要渲染的组件传递局部变量的时候使用

const Home = () => 
Home
;

const App = () => {
  const someVariable = true;
  return (
    
      {/* these are good */}
      
       } />
      {/* do not do this , 下面的写法是错误的*/}
       }
      />
    
  );
};

Navigation

其实就是通过标签对包裹元素，进行导航。
该标签会被渲染为标签
标签是一种特殊的标签，当路由匹配时，它会加上‘active’类

如果你想强制导航，使用

Home
// Home


  React

// React