Reactjs 无法使用嵌套的React路由器Dom v5访问孙子路由器组件

我已经实现了一个嵌套的react路由器应用程序。根据下面的布线结构轮廓，使用（1）布线1、2、3效果良好。另外，当我降落在

3

上时，它会正确地显示

侧栏

和组件

（1）

。当我单击要链接到（2）的组件（1）中的

链接时，它不起作用。我在寻找类似的问题，但没有找到答案。你能告诉我我错过了什么吗

// Outline for routing structure
App.js
L 1
L 2
L 3
  L sidebar // link to (1), (2). This should be docked when rendering (1), (2)
  L (1) // path:'/dashboard' Default & Link to (2)
  L (2) // path:'/dashboard/detail'


导入“/App.css”；
从“React”导入React；
从“react router dom”导入{Switch，BrowserRouter，Route，withRouter}；
函数App（{location}）{
返回(
} />
} />
} />      
);
}
导出默认应用程序；

从“React”导入React；
从“/（1）”进口（1）；
从“/Sidebar”导入侧栏；
从“react router dom”导入{Switch，Route}；
从“/（2）”进口（2）；
从“react bootstrap”导入{Container，Row，Col}；
常数3=（）=>{
返回(
}
准确的
/>
}
准确的
/>            
);
};
导出默认值3；

从“React”导入React；
从“react router dom”导入{Link}；
常数（2）=（）=>{
返回(
详细说明
);
};
出口违约（2）；

问题 正在完全匹配的根“/dashboard”路径会阻止任何其他嵌套子管线进行匹配和渲染。换句话说“/dashboard/detail”不再与指定的根“/dashboard”路径完全匹配

解决方案 删除根仪表板路由上的

exact

道具，以便任何带有“/dashboard”路径前缀的路由都可以由嵌套的

开关

组件进行匹配和渲染

提示：当使用

开关

组件时，将更具体的路径排在不太具体的路径之前，您无需全面指定

确切的

道具。在

开关中

路径顺序和特殊性很重要

应用程序

函数应用程序（{location}）{
返回(
} />
} />
} />      
);
}

构成部分3

const 3= () => {
  return (
    <div>
      <Route path="/dashboard">
        <Row>
          <Col lg={5}>
            <Sidebar />
          </Col>
          <Col lg={7}>
            <Switch>
              <Route
                path="/dashboard/detail"
                render={() => <(2)/>}
              />
              <Route
                path="/dashboard"
                render={() => <(1)/>}
              />   
            </Switch> 
          </Col>
        </Row>
      </Route>
    </div>
  );
};

const 3=（）=>{
返回(
}
/>
}
/>   
);
};

import React from "react";
import (1) from "./(1)";
import Sidebar from "./Sidebar ";
import { Switch, Route } from "react-router-dom";
import (2)from "./(2)";
import { Container, Row, Col } from "react-bootstrap";

const 3= () => {
  return (
  <div>
     <Route path="/dashboard">
      <Row>
        <Col lg={5}>
          <Sidebar />
        </Col>
        <Col lg={7}>

            <Switch>
              <Route
                path="/dashboard"
                render={() => <(1)/>}
                exact
              />
              <Route
                path="/dashboard/detail"
                render={() => <(2)/>}
                exact
              />            
            </Switch> 
        </Col>
      </Row>
    </Route>
  </div>

  );
};

export default 3;

import React from "react";
import { Link } from "react-router-dom";

const (2)= () => {
  return (
    <>     
      <div>
      <Link to="/dashboard/detail">Go to Detail</Link>
      </div>
    </>
  );
};

export default (2);

function App({ location }) {
  return (
    <div>
      <Switch>
        <Route exact path="/1" render={() => <1/>} />
        <Route exact path="/2" render={() => <2/>} />
        <Route path="/dashboard" render={() => <3/>} />      
      </Switch>    
    </div>
  );
}

const 3= () => {
  return (
    <div>
      <Route path="/dashboard">
        <Row>
          <Col lg={5}>
            <Sidebar />
          </Col>
          <Col lg={7}>
            <Switch>
              <Route
                path="/dashboard/detail"
                render={() => <(2)/>}
              />
              <Route
                path="/dashboard"
                render={() => <(1)/>}
              />   
            </Switch> 
          </Col>
        </Row>
      </Route>
    </div>
  );
};