【React】react学习笔记11-路由

官网：

react-router官网:https://reacttraining.com/react-router/web/guides/quick-start

http://react-guide.github.io/react-router-cn/

使用：

这个官网文档比较干净简洁，写的很清楚的，所以我直接抄的（吐槽百度竟然首页没有，我用谷歌搜到的）：

 

1、脚手架创建一个项目：

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

2、安装react-router

npm install react-router-dom

3、基础使用demo：

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、嵌套用法：

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;