使用路由模块
下载路由模块
npm install react-router-dom -S
导入路由模块
import {HashRouter, Route, Link} from 'react-router-dom'
HashRouter : 表示一个路由的根容器, 将来所有的路由相关的东西, 都要包裹在 HashRouter 里面 , 而且一个网站 , 只需要使用一次 HashRouter 就好了
Route : 表示一个路由规则 , 在 Route 身上, 有两个比较重要的属性 ,
path
component
Link : 表示一个路由的链接
启用路由, 实现跳转 demo
import React from 'react' import {HashRouter, Route, Link} from 'react-router-dom' import Home from './components/Home.jsx' import Movie from './components/Movie.jsx' import About from './components/About.jsx' class App extends React.Component { render () { // 当使用 HashRouter 将根组件包裹起来的时候 网站就已经启用路由了 return <HashRouter> <div> <h1>这是网站的app根组件</h1> <Link to="/home">首页</Link> <Link to="/movie">电影</Link> <Link to="/about">关于</Link> <hr/> {/* Route 具有两种身份 1. 它是路由匹配规则 2. 它是一个占位符, 表示将来匹配到的路由放到这个位置 */} <Route path="/home" component={Home}></Route> <Route path="/movie" component={Movie}></Route> <Route path="/about" component={About}></Route> </div> </HashRouter> } }