React Router 的基本使用

1. 官网，安装

组件定位：在React V6中将与@reach/router 合并，成为下代的react的路由标准。

https://reactrouter.com/web/guides/quick-start

https://reactrouter.com/web/guides/quick-start

2. 基本示例：

(1) App.js

import React from "react";
import './App.css'
import {
  Switch,
  Route,
  NavLink
} from "react-router-dom";

export default function App() {
  return (
    // 整个组件必须放置在Router中，见index.js
      <div>
        {/* 相比Link,NavLink会在匹配时，添加一个.active的class */}
        <NavLink to="/">Home</NavLink>|
        <NavLink to="/users">Users</NavLink>|<NavLink to="/about">About</NavLink>
      <hr />
        {/* Switch起到“占位符”的作用，在path匹配的情况下，将期中的组件进行显示 */}
        <Switch>
          <Route path="/about" component={About}/>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <h1>Home</h1>
          </Route>
        </Switch>
      </div>
  );
}

function About() {
  return <h2>About</h2>;
}
function Users() {
  return <h2>Users</h2>;
}

(2) index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
  BrowserRouter as Router
} from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <Router>
    <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();