我在前一个博客上面前面快速创建了react的环境
https://mp.csdn.net/mdeditor/80081268
在App.js里面的代码
import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch, Link} from "react-router-dom";
import logo from './logo.svg';
import Routes from './routes/routes';
import HomePage from './components/home/index'
import About from './components/about/index'
import Example from './components/example/index'
import Page from './page.js'
import './App.css';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<div>
<div><Link to='/'>首页</Link></div>
<div><Link to='/about'>关于</Link></div>
<div><Link to='/example'>列表</Link></div>
</div>
<hr/>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={About} />
<Route path="/example" component={Example} />
</div>
</Router>
);
}
}
export default App;
可以看到里面引用了一个react-router-dom
下载的话 就要使用
yarn add react-router-dom
添加依赖 会在package.json 的dependencies 显示 或者在node_module中也会有此文件夹
image.png
image.png
image.png
我的目录结构
image.png
实现出来的效果如下图 ,点击上面的首页, 关于, 主题 底下就会分别显示对应组件中的内容
image.png
