react嵌套路由，並設置默認子路由

 

 

弄了好長時間，記得之前寫的時候沒問題呀，現在不知道哪里出現問題，后來才發現 是 exact  和 跳轉子路由 路徑的問題，哎

 

 

 

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;

 

 

 

 

默寫子路由 ，修改 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;

 

 

 

 

參考

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