超详细又简单的react router 的使用

一个简单的路由结构

index.js

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

import PhotoPageLayout from '../layout/photo-page-layout';
import HomePageLayout from '../layout/home-page-layout';
import List from '../layout/home-page-layout';


  

        首页
        一个页面
        另一个页面
        
        
        
    

⚠️里面只能出现一个子节点 ⇒ A may have only one child element

❌的示范

    

    



✅的示范

    

⚠️里面不能出现(尤其是将Route 重新写在一个JavaScript文件里面的时候，特别要注意)

index.js

import RouterList from '../router/router';


  

        首页
        一个页面
        另一个页面
        
    

router.js

import React from 'react';

import PhotoPageLayout from '../layout/photo-page-layout';
import HomePageLayout from '../layout/home-page-layout';
import List from '../layout/home-page-layout';

import { Route } from 'react-router-dom';

const RouterList = () => (

❌的示范--------------------------------------------------
  
    
    
  
---------------------------------------------------------

✅的示范--------------------------------------------------
  

    
    
  
---------------------------------------------------------
)
export default RouterList;