Guide-2019-05-09-React Router 4.x官方文档翻译-指南

最新版本的react-router 4.x，官方文档只有英文的，无奈英文看起来比较费力，大部分人是不是跟我一样，先找中文资料，实在没办法再去看英文原版，嘿嘿嘿。
找不到中文的，那我就自己来翻译一下吧，边翻译边学习。

指南

• 快速开始

1、创建一个react项目

npm install -g create-react-app
create-react-app demo-app
cd demo-app

2、引入react-router-dom

npm install react-router-dom

3、简单路由举例

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function Index() {
  return 
Home
;
}

function About() {
  return 
About
;
}

function Users() {
  return 
Users
;
}

function AppRouter() {
  return (
    
      

        

          

            
Home
            
About
            
Users
          
        

        
        
        
      
    
  );
}

export default AppRouter;

4、嵌套路由举例

/topics路径加载Topics组件，而Topics组件又根据动态参数id进一步渲染不同的内容
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    
      

        {* 导航头Header组件 *}
        


        
        
        
      
    
  );
}
function Header() {
  return (
    

      
Home
      
About
      
Topics
    
  );
}

function Home() {
  return 
Home
;
}

function About() {
  return 
About
;
}

function Topics({ match }) {
  return (
    

      
Topics

      

        
Components
        
Props v. State
      
      {*在这里根据参数id渲染Topic组件的内容
        （这个参数id就是上面标签中to属性/后面的值，分别是component, props-v-state）
       *}
      

      {*这里是默认显示的内容*}
       
Please select a topic.
}/>
    
  );
}

function Topic({ match }) {
  return 
Requested Param: {match.params.id}
;
}

export default App;