react路由react-router-dom

一、安装react路由

npm install react-router-dom 

二、如何使用

import { BrowserRouter, Route } from 'react-router-dom'

<BrowserRouter>
  <div>
    <Route path="/" exact render={()=>(<div>home</div>)} />
    <Route path="/detail" exact  render={()=><div>detail</div>} />
  </div>
</BrowserRouter>

exact 表示精确匹配，render后面跟一个箭头函数，返回要显示的内容

三、改进成组件形式

1、在src目录下创建pages文件夹，在里面创建home和detail文件夹，分别存放对应的组件，例如home下创建组件，新建index.js

import React, { Component } from 'react';
class Home extends Component{
  render(){
    return <div>home~</div>;
  }
}
export default Home;

2、引用pages下的组件

import Home from './pages/home';
import Detail from './pages/detail';

...

<BrowserRouter>
  <div>
    <Route path="/" exact component={ Home } />
    <Route path="/detail" exact  component={ Detail }  />
  </div>
</BrowserRouter>

...