一、路由模块
在React项目中 若要实现页面的跳转 需使用路由
而react-router-dom正是React推荐的常用路由模块
安装
npm install react-router-dom
按需导入react-router-dom路由模块
HashRouter是路由的根容器 所有和路由相关的东西都要包裹在HashRouter内部 且一个网站只需要使用一次HashRouter
Router是路由规则(rules) 其上有两个重要属性:path和component
Link表示路由链接 类似于Vue中的<router-link>
import {
HashRouter,Route,Link} from 'react-router-dom'
使用
App.jsx:
import Index from '@/components/Index'
import Type from '@/components/Type'
import About from '@/components/About'
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
// 当使用<HashRouter>将根组件的元素包裹起来后 网站即启动路由
// 在<HashRouter>内部只能有唯一的根标签
return <HashRouter&g