react嵌套路由，并设置默认子路由 react路由常用组件_react_前端技术

react嵌套路由，并设置默认子路由 react路由常用组件

2023-02-08 学习力0

核心提示：弄了好长时间，记得之前写的时候没问题呀，现在不知道哪里出现问题，后来才发现是 exact 和跳转子路由路径的问题，哎 App.jsimport React, {lazy, Suspense}from "react";import { Switch, Route } from 'react-router-dom';function App() {re

弄了好长时间，记得之前写的时候没问题呀，现在不知道哪里出现问题，后来才发现是 exact 和跳转子路由路径的问题，哎

react嵌套路由，并设置默认子路由

App.js

import React, {lazy, Suspense}  from "react";
import { Switch, Route } from 'react-router-dom';
function App() {
  return (
    <div className="App">
      <Suspense fallback={React.Fragment}>
        <Switch><Route path="/" exact component={lazy(() => import('./views/Login'))}>Route>
　　　　　　
　　　　　　// 切记！！！！！！  这里不能加 exact  否则子路由匹配不进去
          <Route path="/MyService" component={lazy(() => import('./views/MyService'))}>Route>

          <Route path="*" component={lazy(() => import('./views/Error/Error'))}>Route>
        Switch>
      Suspense>
    div>
  );
}

export default App;

MyService/index.js

import React from 'react';
import { Switch, Route, useHistory } from 'react-router-dom';
import { Button } from 'antd-mobile';
// import routes from 'src/router';
import dent from './dent/dent'
import high from './high/high'

function MyService () {
  const history = useHistory()
  return (
    <div>
      MyService
　　　　// !!!!!!    这里切记写上完整的路由路径，，即 父路由 + 子路由
      <Button type="primary" onClick={() => history.push('/MyService/dent')}>AButton>
      <Button type="primary" onClick={() => history.push('/MyService/high')}>BButton>
      <Switch>
　　　　
　　　　　// !!!!!!      这里切记写上完整的路由路径，，即 父路由 + 子路由

　　　　　　<Route path="/MyService/dent" component={dent}>Route> 
　　　　　　<Route path="/MyService/high" component={high}>Route> 
　　　　Switch> 
　　　div> 
　　) 
} 

export default MyService;

MyService/dent/dent.jsx

import React from 'react';

function dent () {
  return (
    <div>
      dent
    div>
  )
}

export default dent;

MyService/high/high.jsx

import React from 'react';

function high () {
  return (
    <div>
      high
    div>
  )
}

export default high;

react嵌套路由，并设置默认子路由

默写子路由，修改 MyService/index.js

import React from 'react';
import { Switch, Route, useHistory } from 'react-router-dom';
import { Button } from 'antd-mobile';
// import routes from 'src/router';
import dent from './dent/dent'
import high from './high/high'

function MyService () {
  const history = useHistory()
  return (
    <div>
      MyService
      <Button type="primary" onClick={() => history.push('/MyService/')}>AButton>
      <Button type="primary" onClick={() => history.push('/MyService/high')}>BButton>
      <Switch>
        <Route exact path="/MyService/" component={dent}>Route>
        <Route path="/MyService/high" component={high}>Route>
      Switch>
    div>
  )
}

export default MyService;

react嵌套路由，并设置默认子路由

参考

https://www.cnblogs.com/yuyujuan/p/10140264.html

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.