react路由

react-router-dom

基于React-route，提供hash、支持api跳转

编写页面

/*文件: /src/views/home.js */
import React, { Component } from 'react'
import { Link } from 'react-router-dom';
class Home extends Component {
  render() {
    return <div>
      <a href='#/detail'>跳转方式1</a>
      <br/>
      <Link to='/detail'>
        跳转方式2
      </Link>
      <br/>
      <a  onClick={ ()=>{this.props.history.push('/detail')} }>跳转方式3</a>
      <br/>
    </div>;
  }
}
export default Home;

---

定义路由

/*文件: /src/router/index.js */
import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
//引入的页面
import Home from "../views/home"; 
import Detail from "../views/detail"; 

const BasicRoute = () => (
  <HashRouter>
    <Switch>
      <Route exact path="/" component={Home}/>
       {/* :id 表示可以匹配类似 /detail/1 的路由 通过this.props.match.params.id获取 */}
      <Route path='/detail/:id' exact component={ Detail} />
    </Switch>
  </HashRouter>
);

export default BasicRoute;

---

引入路由

/*文件: /src/App.js */
import React from 'react';
import Router from "./router"
import './App.css';

function App() {
  return (
    <div className="App">
      <Router/>
    </div>
  );
}

export default App;