react實(shí)現(xiàn)移動(dòng)端二級(jí)路由嵌套詳解

更新時(shí)間：2022年08月15日 10:07:46 作者：是張魚小丸子鴨

這篇文章主要介紹了react移動(dòng)端二級(jí)路由嵌套的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

頁面效果展示

功能需求

根據(jù)下面不同的標(biāo)題切換不同的頁面，請求接口數(shù)據(jù)，渲染頁面數(shù)據(jù)，點(diǎn)擊左側(cè)數(shù)據(jù)，進(jìn)入詳情頁面，在右側(cè)圖片中點(diǎn)擊返回返回左面頁面

實(shí)現(xiàn)代碼

我們用到了react中的router，首先我們要下載react的路由，命令是

react-router-dom@5 --save

路由5版本跟6版本使用語法上略有區(qū)別，現(xiàn)在使用較多的是5版本

我們首先在index.js文件中引入react路由，然后進(jìn)行路由跳轉(zhuǎn)

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();

這樣默認(rèn)打開的就是我們的app組件，一定要使用Switch包裹，否則他就是路由模糊匹配，如果是模糊匹配，他可能會(huì)把router路由全部渲染到頁面，使用Switch他會(huì)從上往下匹配，匹配到一個(gè)路由地址以后就不在繼續(xù)執(zhí)行了

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">
      {/* 定義二級(jí)路由的地址 */}
      <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>
      {/* 底部導(dǎo)航欄 */}
      <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組件中有四個(gè)子路由，聲明式-視圖導(dǎo)航 NavLink Link NavLink是Link的包裝，NavLink activeStyle 高亮內(nèi)置樣式 activeClassname設(shè)置高亮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>
        )
  }
}

在這點(diǎn)擊圖片跳轉(zhuǎn)到詳情頁面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>
    )
  }
}

在這個(gè)組件中我們封裝了一個(gè)子組件，里面有一個(gè)返回按鈕

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)

不是所有組件都直接與路由相連（比如拆分的子組件）的，當(dāng)這些組件需要路由參數(shù)時(shí)，使用withRouter就可以給此組件傳入路由參數(shù)，將react-router的history、location、match三個(gè)對(duì)象傳入props對(duì)象上，此時(shí)就可以使用this.props。

到此這篇關(guān)于react實(shí)現(xiàn)移動(dòng)端二級(jí)路由嵌套詳解的文章就介紹到這了,更多相關(guān)react二級(jí)路由嵌套內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: