我在前一個(gè)博客上面前面快速創(chuàng)建了react的環(huán)境
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'>關(guān)于</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;
可以看到里面引用了一個(gè)react-router-dom
下載的話 就要使用
yarn add react-router-dom
添加依賴 會(huì)在package.json 的dependencies 顯示 或者在node_module中也會(huì)有此文件夾
image.png
image.png
image.png
我的目錄結(jié)構(gòu)
image.png
實(shí)現(xiàn)出來的效果如下圖 ,點(diǎn)擊上面的首頁, 關(guān)于, 主題 底下就會(huì)分別顯示對(duì)應(yīng)組件中的內(nèi)容
image.png
