Reactjs 嵌套的反应路由未显示内容

我使用的是React 4，它有一个顶级组件，可以发布这样的路由

            <Route path={testingUrl}>
                <TestingPage />
              </Route> 

TestingPage组件是

   import React from "react";
   import { BrowserRouter, Route, withRouter } from "react-router-dom";
   import { createBrowserHistory } from 'history';
   const history = createBrowserHistory();
   const DropDown = () =>  {
     const onChange = (e) => {
       history.push(`/aaa/testing/${e.target.value}`);
     }
       return (
         <select onChange={onChange}>
           <option value="first-route">First</option>
           <option value="second-route">Second</option>
         </select>
       );
   }
   const Menu = withRouter(DropDown);
   export default function TestingPage() {
     return (
       <BrowserRouter>
         <div>
           <Route path="/aaa/testing/first-route" render={() => <h1>First Selected</h1>} />
           <Route path="/aaa/testing/second-route" render={() => <h1>Second Selected</h1>} />
           <Menu />
         </div>
       </BrowserRouter>
     );
   }

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，withRouter}；
从“历史”导入{createBrowserHistory}；
const history=createBrowserHistory（）；
常量下拉列表=（）=>{
const onChange=（e）=>{
history.push（`/aaa/testing/${e.target.value}`）；
}
返回(
弗斯特
第二
);
}
常量菜单=带路由器（下拉菜单）；
导出默认函数TestingPage（）{
返回(
第一次选择}/>
第二次选择}/>
);
}

我在下拉列表中选择了第二项，URL被正确更新为“/aaa/testing/second route”，但“second Selected”未显示。我不明白为什么

---

请注意，我不想做任何会丢失React上下文内容的事情。

我认为问题在于，thr下拉组件使用的“历史记录”与BrowserRouter正在监视更改的“历史记录”不同

如果希望下拉列表使用与BrowserRouter相同的历史记录，则需要使用withRouter传递的道具，而不是使用createBrowserHistory创建第二个道具

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

const DropDown = props => {
  const {history} = props;
   
  const onChange = (e) => {
     history.push(`/aaa/testing/${e.target.value}`);
  }
  return (
    <select onChange={onChange}>
      <option value="first-route">First</option>
      <option value="second-route">Second</option>
    </select>
  );
}
const Menu = withRouter(DropDown);

从“React”导入React；
从“react router dom”导入{withRouter}；
常量下拉列表=道具=>{
const{history}=props；
const onChange=（e）=>{
history.push（`/aaa/testing/${e.target.value}`）；
}
返回(
弗斯特
第二
);
}
常量菜单=带路由器（下拉菜单）；

---

如果您确实需要使用自定义历史对象（例如，如果您正在传递一个基本URL），那么您需要在创建它时将其传递给BrowserRouter，不是下拉列表。

我认为问题在于，下拉列表组件使用的“历史记录”与浏览器路由器监视的“历史记录”不同

如果希望下拉列表使用与BrowserRouter相同的历史记录，则需要使用withRouter传递的道具，而不是使用createBrowserHistory创建第二个道具

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

const DropDown = props => {
  const {history} = props;
   
  const onChange = (e) => {
     history.push(`/aaa/testing/${e.target.value}`);
  }
  return (
    <select onChange={onChange}>
      <option value="first-route">First</option>
      <option value="second-route">Second</option>
    </select>
  );
}
const Menu = withRouter(DropDown);

从“React”导入React；
从“react router dom”导入{withRouter}；
常量下拉列表=道具=>{
const{history}=props；
const onChange=（e）=>{
history.push（`/aaa/testing/${e.target.value}`）；
}
返回(
弗斯特
第二
);
}
常量菜单=带路由器（下拉菜单）；

---

如果您确实需要使用自定义历史对象（例如，如果您正在传递一个基本URL），那么您需要在创建它时将其传递给BrowserRouter，而不是下拉列表。

谢谢David，我错过了在下拉列表中传递历史。改为 常量下拉列表=（{history}）=>{

---

工作：-）

谢谢大卫，我错过了在下拉列表中浏览历史。改为 常量下拉列表=（{history}）=>{

---

已工作：-）

谢谢David，我不需要自定义历史对象。如果删除该历史定义，我会得到“history.push不是函数”错误。如果没有常量历史记录，我似乎无法访问历史记录对象。为了与路由器一起使用，需要在BrowserRouter中创建组件。否则，上下文中就不会有历史记录供您使用。它似乎没有包含所有代码。我在BrowserRouter中有菜单，这是您的意思吗：

const Menu=withRouter（下拉）；导出默认函数TestingPage（）{return（First Selected}/>Second Selected}/>）；}

Yes。应该是这样的谢谢David，我不需要自定义历史对象。如果删除该历史定义，则会出现“history.push不是函数”错误。如果没有常量历史记录，我似乎无法访问历史记录对象。为了与路由器一起使用，需要在BrowserRouter内部创建组件。否则，上下文中就不会有供您使用的历史记录。它似乎没有包含所有代码。我在浏览器路由器中有菜单，这就是你的意思：

const menu=withRouter（下拉菜单）；导出默认函数TestingPage（）{return（第一个选中的}/>第二个选中的}/>）；}是。应该是这样的