React-Router v5文档翻译之快速开始

本项目Github地址,欢迎star

目录

你需要一个React web app 来添加react-router。

如果你需要创建一个新的React Web App,最容易的方式是通过一个叫做create-react-app的官方脚手架来创建。

第一步是先来安装create-react-app,如果你以及安装过这个工具，那么可以直接使用她来创建一个新的项目。

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

安装

React Router Dom 已经被发布到来npm上, 所以你可以用npm或yarn来安装她。

npm install react-router-dom

示例：基础路由

在这个例子中，我们会使用来构建一个拥有3个页面的示例。
注意: 我们用 < Link to="/"> 来代替 < a href="/">

把下方的代码复制到demo-app里面的src目录下的App.js文件中

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;

示例：嵌套路由

这个示例向我们展示来嵌套路由如何工作，路由 '/topics'会加载Topics组件，这个组件会通过':id'的路由来渲染出更多的内容。

把下方的代码复制到demo-app里面的src目录下的App.js文件中

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

function App() {
  return (
    
      

        


        
        
        
      
    
  );
}

function Home() {
  return 
Home
;
}

function About() {
  return 
About
;
}

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

function Topics({ match }) {
  return (
    

      
Topics

      

        

          Components
        
        

          Props v. State
        
      

      
       
Please select a topic.
}
      />
    
  );
}

function Header() {
  return (
    

      

        Home
      
      

        About
      
      

        Topics
      
    
  );
}

export default App;