1、下载包
npm install react-router-dom@4.3.1 --save
react-router常用组件<BrowserRouter>、<HashRouter>、<Route>、<Redirect>、<Link>、<NavLink>、<Switch>
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './components/app'
import './index.css'
ReactDOM.render(
(
// BrowserRouter 用来包裹根组件
<BrowserRouter>
<App />
</BrowserRouter>
),
document.getElementById('root')
)
Switch:路由性需要频繁切换时使用;
Route:路由组件;
Redirect:重定向组件;
NavLink:做路由跳转使用
BrowserRouter :包裹根路由组件
// 导入 React 模块
import React, { Component } from "react";
// react-router-dom路由模块必装的包
import {Switch,Route,Redirect} from 'react-router-dom'
// 自定义组件 (MyNavLink是从react-router-dom的NavLink提出来的自定义组件,用于路由跳转)
import MyNavLink from "../components/my-nav-link";
import News from "./news";
import Message from "./message";
// 暴露并创建react类
export default class Home extends Component {
render() {
return (
<div>
<h2>home component</h2>
<ul className="nav nav-tabs">
<li>
<MyNavLink to="/home/news" >
News
</MyNavLink>
</li>
<li>
<MyNavLink to="/home/message" >
Message
</MyNavLink>
</li>
</ul>
<div>
<Switch >
<Route path='/home/news' component={News}></Route>
<Route path='/home/message' component={Message}></Route>
<Redirect to='/home/news' />
</Switch>
</div>
</div>
);
}
}
react-router官网 BrowserRouter | React Router