react實現移動端二級路由嵌套詳解
頁面效果展示
功能需求
根據下面不同的標題切換不同的頁面,請求接口數據,渲染頁面數據,點擊左側數據,進入詳情頁面,在右側圖片中點擊返回返回左面頁面
實現代碼
我們用到瞭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二級路由嵌套內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- react-router-domV6版本的路由和嵌套路由寫法詳解
- 五分鐘教你瞭解一下react路由知識
- React-Router6版本的更新引起的路由用法變化
- React路由封裝的實現淺析
- React中路由的參數傳遞路由的配置文件詳解