关于react.js:reactrouterdom

79次阅读

共计 619 个字符，预计需要花费 2 分钟才能阅读完成。

1、装置

yarn add react-router-dom

2、根本应用

BrowserRouter,HashRouter是两种路由形式，应用 NavLink ,Link,Route 时必须被路由器包裹。
NavLink ,Link是设置页面跳转，而 NavLink 有activeClassName属性，能够自定义设置 active 选中的 class，默认activeClassName="active"。

import {BrowserRouter,HashRouter,NavLink ,Link,Route} from "react-router-dom"
import Home from './components/Home'
import About from './components/About'


<BrowserRouter>
  <NavLink activeClassName="demo" className="list-group-item" to="/about">
    About
  </NavLink>
  <NavLink activeClassName="demo" className="list-group-item" to="/home">
    Home
  </NavLink>
  <Route path="/about" component={About}></Route>
  <Route path="/home" component={Home}></Route>
</BrowserRouter>

正文完