在react中启用路由模块,首先要装包:npm i react-router-dom -S
,装完之后在根组件中导入:import {HashRouter, Route, Link} from "react-router-dom"
。
- HashRouter:表示一个路由的根容器,将来,所有路由相关的东西,都要包裹在HashRouter里面,而且,一个网站中,只需要使用一次HashRouter就好了。HashRouter内部只能有一个节点。
- Route:表示一个路由规则,在Route上,有两个比较重要的属性:path和component。path表示需要匹配的路由,component指定与路由相关的组件。Route有占位符的功能,即将其写在哪里,将来组件就在哪里展示。
- Link:表示一个路由的链接。
下面通过实际的例子展示React中路由的基本使用:
App.jsx
根组件:
import React from "react"
import {HashRouter, Route, Link} from "react-router-dom"
import Home from "@/components/Home";
import Movie from "@/components/Movie";
import About from "@/components/About";
class App extends React.Component{
constructor(props) {
super(props);
this.state = {}
}
render(){
return <HashRouter>
<div>
<h1>这是网站的App根组件</h1>
<hr/>
<Link to="/home">首页</Link>
<Link to="/movie">电影</Link>
<Link to="/about">关于</Link>
<hr/>
<Route path="/home" component={Home}></Route>
<Route path="/movie" component={Movie}></Route>
<Route path="/about" component={About}></Route>
</div>
</HashRouter>
}
}
export default App;
运行结果如下:
可以看到地址栏已成功启动了路由功能,且三个子组件能够通过链接正确的路由。