react实现移动端二级路由嵌套详解_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 ( 
 ) } root.render(  ); reportWebVitals();

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 ( 
 {/* 定义二级路由的地址 */}  {/* 底部导航栏 */} 
 ) } }

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 ( 
 { list.map((item, index) => { return ( 
this.goDetail(item.id)}/>
{item.title}
删除
 ) }) } 
 ) } }

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 ( 
{info.title}
 ) } }

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 ( 
this.props.history.goBack()}>返回
 ) } } export default withRouter(NavBar)