页面效果展示
功能需求
根据下面不同的标题切换不同的页面，请求接口数据，渲染页面数据，点击左侧数据，进入详情页面，在右侧图片中点击返回返回左面页面
实现代码
我们用到了react中的router，首先我们要下载react的路由，命令是
react-router-dom@5 --save
路由5版本跟6版本使用语法上略有区别，现在使用较多的是5版本
我们首先在index.js文件中引入react路由，然后进行路由跳转
import { default as React } from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter, Route, Switch } from 'react-router-dom';
import App from './App';
import Detail from './Component/Detail';
import './index.css';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
export default function Routers() {
return (
<div>
<HashRouter>
<Switch>
<Route path='/' component={App}></Route>
<Route path='/detil' component={Detail}></Route>
</Switch>
</HashRouter>
</div>
)
}
root.render(
<Routers />
);
reportWebVitals();这样默认打开的就是我们的app组件，一定要使用Switch包裹，否则他就是路由模糊匹配，如果是模糊匹配，他可能会把router路由全部渲染到页面，使用Switch他会从上往下匹配，匹配到一个路由地址以后就不在继续执行了
app.js组件
import React, { Component } from 'react';
import { NavLink, Route } from 'react-router-dom';
import './App.css';
import Article from './Component/Article';
import Cart from './Component/Cart';
import Detail from './Component/Detail';
import Home from './Component/Home';
import My from './Component/My';
export default class App extends Component {
render() {
return (
<div className="box">
{/* 定义二级路由的地址 */}
<Route path="/home" component={Home}></Route>
<Route path="/article" component={Article}></Route>
<Route path="/cart" component={Cart}></Route>
<Route path="/my" component={My}></Route>
<Route path="/detail/:id" component={Detail}></Route>
{/* 底部导航栏 */}
<nav>
<NavLink to="/home" activeClassName="act">
<div className='title'>首页</div>
</NavLink>
<NavLink to="/article" activeClassName="act">
<div className='title'>文章</div>
</NavLink>
<NavLink to="/cart" activeClassName="act">
<div className='title'>购物车</div>
</NavLink>
<NavLink to="/my" activeClassName="act">
<div className='title'>我的</div>
</NavLink>
</nav>
</div>
)
}
}app.js组件中有四个子路由，声明式-视图导航 NavLink Link NavLink是Link的包装，NavLink activeStyle 高亮内置样式 activeClassname设置高亮class类
Article.js
import axios from 'axios';
import React, { Component } from 'react';
export default class Article extends Component {
constructor() {
super();
this.state = {
list:[],
}
this.getList();
}
goDetail = (id)=>{
this.props.history.push("/detail/" id);
}
//定义获取文章列表的方法
getList = async ()=>{
let {data} = await axios.get("https://api.it120.cc/small4/cms/news/list");
console.log(data);
this.setState({
list:data.data,
})
}
render() {
let {list} = this.state;
return (
<div className='article'>
<div className="list">
{
list.map((item, index) => {
return (
<div className="item" key={index}>
<img src={item.pic} onClick={()=>this.goDetail(item.id)}/>
<div className="title">{item.title}</div>
<button className='del'>删除</button>
</div>
)
})
}
</div>
</div>
)
}
}在这点击图片跳转到详情页面Detail.js文件
Detail.js
import axios from "axios";
import React, { Component } from 'react';
import NavBar from "./NavBar";
export default class Detail extends Component {
constructor(props){
super(props)
this.state = {
info:{},
}
this.getInfo();
}
getInfo = async ()=>{
let {id} = this.props.match.params;
console.log(id);
let {data} = await axios.get("https://api.it120.cc/small4/cms/news/detail?id=" id);
console.log(data);
this.setState({
info:data.data,
})
}
render() {
let {info} = this.state;
return (
<div style={{padding:"10px"}}>
<NavBar/>
<h2>{info.title}</h2>
<img src={info.pic} style={{width:"100%"}}/>
<div className="info" dangerouslySetInnerHTML={{__html:info.content}}>
</div>
</div>
)
}
}在这个组件中我们封装了一个子组件，里面有一个返回按钮
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class NavBar extends Component {
constructor(props){
super(props)
console.log(this.props);
}
render() {
return (
<div className='NavBar'>
<span onClick={()=>this.props.history.goBack()}>返回</span>
</div>
)
}
}
export default withRouter(NavBar)不是所有组件都直接与路由相连（比如拆分的子组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，将react-router的history、location、match三个对象传入props对象上，此时就可以使用this.props。
到此这篇关于react实现移动端二级路由嵌套详解的文章就介绍到这了,更多相关react二级路由嵌套内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！