共计 1186 个字符，预计需要花费 3 分钟才能阅读完成。
准备工作：安装 react-router-dom
npm i react-router-dom -S
配置 webpack，划重点，如果直接在浏览器地址里输入路径，这个是必须要配置的
devServer:{
historyApiFallback:true
}
先写两个组件备用，非常简单的两个组件
class R1 extends React.Component{
render(){
return <div>1</div>
}
}
class R2 extends React.Component{
render(){
return <div>2</div>
}
}
引入 BrowserRouter 和 Route，这两个目前就够用了
import {Route, BrowserRouter} from ‘react-router-dom’;
创建路由并渲染
class Rts extends React.Component{
render(){
return <div className=”test”>
<BrowserRouter>
<div>
<Route exact={true} path=”/” component={R1}></Route>
<Route exact={true} path=”/r2″ component={R2}></Route>
</div>
</BrowserRouter>
</div>
}
}
const render = () => {
ReactDOM.render(
<Rts></Rts> ,
document.querySelector(‘#app’)
)
}
render();
打开浏览器默认就是 1，然后在浏览器的地址输入 yourServer/r2，就可以看到页面上显示 2 了
使用 Link: 首先需要引入 Link, 从 react-router-dom 多引入一个即可
import {Route, BrowserRouter, Link} from ‘react-router-dom’;
使用 Link 创建一个组件
class RLink extends React.Component{
render(){
return <ul>
<li><Link to=”/”> 显示 1 </Link></li>
<li><Link to=”/r2″> 显示 2 </Link></li>
</ul>
}
}
修改 Rts 组件，注意标签嵌套层级
class Rts extends React.Component{
render(){
return <div className=”test”>
<BrowserRouter>
<div>
<RLink></RLink>
<Route exact={true} path=”/” component={R1}></Route>
<Route exact={true} path=”/r2″ component={R2}></Route>
</div>
</BrowserRouter>
</div>
}
}
这样就好了，实际效果如图
