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 (
    <BrowserRouter>
      <div>
        <ul>
          <li><Link to="/">home</Link></li>
          <li><Link to="/list">list</Link></li>
          <li><Link to="/about">about</Link></li>
        </ul>

        <hr></hr>

          <>
          {/* 在此渲染不同的内容 */}
            <Route path="/" component={Home} exact></Route>
            <Route path="/list" component={List}></Route>
            <Route path="/about" component={About}></Route>
          </>
      </div>
    </BrowserRouter>
  )
}

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const List = () => (
  <div>
    <h2>List</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));