本文共 2349 字，大约阅读时间需要 7 分钟。

React Router ������������

��� React ��������������� React Router ������������

1. ������ React Router

���������������������������������

������������������ npm

���������������������������������������

npm install react-router-dom

������������������ cnpm ��� yarn

���������������������������������������������������

cnpm install react-router-dom

������

yarn add react-router-dom

2. ������ React Router ������

1. ��� ��������� ���������

import { HashRouter as Router } from 'react-router-dom';

2. ��� ������������ ���������

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

������������

������������������������������������������������������������������������ React ������������������

3. ������������������

������������������������

������������������

• exact ������������������������������������������
• Redirect ������������������������������
• <Switch> ������������������������������������

4. NavLink ��� Link ���������

NavLink

• ��������������������� to ������������������������
• ��������������������� active ���������������
• ���������

   
    Index
   

Link

• ��������������������� to ���������������������������
• ������������������ active ������������

5. withRouter ������������

������

������������������������������������������

������

function withRouter(WrappedComponent) {
  return function(WrappedComponent) {
    return function(WrappedComponent) {
      return function(WrappedComponent) {
        return function(WrappedComponent, props) {
          return 
   ;
        };
      };
    };
  };
}

6. ������������������

���������������

   ������������������

���������������

function GoLogin() {
  return (
     {
        props.history.push("/login");
      }}
    >
      ���������
    
  );
}

7. ������������������

������������������URL������

// ������������������������������������
   
  
    
   
// ���������������
const id = props.match.params.id;

������������URL ������������������

// ������������������ URL ������������
   ������

������������

���������������������������������������������������������������

8. ������������������������

���������������

< NavBar>
  < NavLink to="/index">������ |
  < NavLink to="/login">������

������������������

   
     (
  
    
     
    ...
  
    
)} />
   

������������������������������������������������ React ������������������������������������������������������������������������������������������