路由的基本使用
下载 NPM i -D react-router react-router-dom
App.JS
ps==>NavLink 选中的时候 可以高亮
demo 是你自己添加的一个类哈
activeClassName 点击的时候 可以高亮显示
- import Chuli from "./components/Chuli"
- import Clock from "./components/Clock"
- import {Link,Route,NavLink} from "react-router-dom"
- <NavLink to="/chuli" activeClassName="demo">Chuli</NavLink>
- <NavLink to="/clock" activeClassName="demo">Clock</NavLink>
- <Route path="/Chuli" component={Chuli}></Route>
- <Route path="/Clock" component={Clock}></Route>
- index.JS(脚手架自带的哈)
- // 路由新增加的
- import {HashRouter,BrowserRouter} from "react-router-dom"
- ReactDOM.render(
- <BrowserRouter>
- <App/>
- </BrowserRouter>,
- document.getElementById('root'));
最终效果 点击的路由的时候 可以高亮显示
来源: http://www.bubuko.com/infodetail-3336994.html