React 学习笔记 （七）（路由及路由嵌套 react-router 4.x 基本配置及使用）

版权声明：未经允许，不可以转载哦~ https://blog.csdn.net/qq_39242027/article/details/83786239

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.酱酱~ (✧◡✧)