1.起步

1.安装依赖

//1.安装依赖
yarn add react-router-dom

2.配置路由

React中的路由配置到根组件中

//2配置路由  app.js
import React, { Component } from 'react';
//要先导入
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
import Home from './views/Home'
import About from './views/About'
import Detail from './views/Detail'
class App extends Component {
    render() {
      return (
         <div>
          <Router>
            {/* exact：路由的严格匹配，只有路径为'/'才会加载对应的路由 */}
                <Route exact path="/" component={Home}></Route>
                <Route path="/about" component={About}></Route>
                <Route path="/detail" component={Detail}></Route>
          </Router>
        </div>
        );
    }
}
export default App;
//exact严格匹配,只有path="/",才能访问。如果不写,只要path包含"/",都能访问

问题:route没有加Switch,那么每输入一次url,则对应的组件都加载一次

3.Switch解决路由组件重复加载的问题

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <Route  path="/" component={Home}></Route>
            <Route path="/news" component={News}></Route>
            <Route path="/list" component={List}></Route>
          </Switch>
        </div>
      </Router>
    )
  }
}

4.Link跳转

如果要用Link,要在router里面使用

class App extends Component {
 render() {
   return (
      <div>
        <Router>
           //如果要使用link，要在router里面使用
           <ul>
              <li><Link to="/">首页</Link></li>
              <li><Link to="/about">About</Link></li>
            </ul>
            {/* exact：路由的严格匹配，只有路径为/才会加载对应的路由 */}
            {/* switch:只有对应的路由才会被加载 */}
            <Switch>
               <Route exact path="/" component={Home}></Route>
               <Route path="/about" component={About}></Route>
               <Route path="/detail" component={Detail}></Route>
            </Switch>
          </Router>
       </div>
        );
    }
}