react-router 路由
根据用户访问的地址动态的加载不同的组件
1.安装
npm install react-router-dom --save
2.引入
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
3.使用
注意:
<1>.要被根组件包裹
<2>.exact 表示严格匹配
<3>.path 跳转的地址 component 加载的组件(需要提前创建并引入)
<Router>
//要被根组件包裹
<div>
//链接地址
<Link to='/'>首页</Link>
<Link to='/news'>新闻</Link>
<hr/>
//加载不同组件
<Route exact path='/' component={RouterHome}></Route>
<Route path='/news' component={RouterNews}></Route>
</div>
</Router>
4.酱酱~ (✧◡✧)
react-router 路由嵌套
1.引入(新闻中心、最新信息)组件
import NewsMain from './User/NestMain';
import NewsInfo from './User/NestInfo';
2.新闻.js
<div className='content'>
<div className='left'>
//链接地址
<Link to='/news'>新闻中心</Link><br/><br/>
<Link to='/news/info'>最新信息</Link>
</div>
<div className='right'>
{/* 地址写法不同 */}
{/* 方法一 */}
<Route exact path='/news' component={NewsMain}></Route>
<Route path='/news/info' component={NewsInfo}></Route>
{/* 方法二 */}
<Route exact path={`${this.props.match.url}/`} component={NewsMain}></Route>
<Route path={`${this.props.match.url}/info`} component={NewsInfo}></Route>
</div>
</div>
3.酱酱~ (✧◡✧)