6 - 路由

中文文档

React路由的实现需要安装 react-router 或 react-router-dom 。

react-router 与 react-router-dom 的区别

• react-router

提供了一些router的核心组件, 包括Router、Route、Switch组件等，但是没有提供 dom 操作进行跳转的api。

• react-router-dom

基于 react-router , 并提供了 BrowserRouter、Route、Link等组件，我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况我们都是使用的 react-router-dom。

基础使用

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';

const App = () => {
  return (
    
      

        

          
home
          
list
          
about
        

        


          <>
          {/* 在此渲染不同的内容 */}
            
            
            
          
      
    
  )
}

const Home = () => (
  

    
Home
  
);

const List = () => (
  

    
List
  
);

const About = () => (
  

    
About
  
);

ReactDOM.render(, document.getElementById('root'));