Reactjs 如何调试路由器在url更改时不加载组件

我使用的是react路由器dom版本4.3.1 单击链接后，URL会更改，但不会呈现React组件（事实上，调试器不会在代码中的任何一点停止）。 我已经尝试使用

和component

和

exact

关键字，但效果并不理想。以下两种解决方案中提到了这一点： 和 它唯一有效的时间是使用刷新按钮刷新页面时。 我正在

index.js

中的

root

元素中加载路由器：

ReactDOM.render（，document.getElementById（“根”）

批准人有以下代码：

export const AppRouter = () => {
    return (
        <>
        <HashRouter>
        <div>
        <Switch>
        <Route path="/page1" component={Page1} />
        <Route path="/page1" component={withRouter(Page2)} /> //still doesn't work
        <Route exact path="/" component={Home} />
        </Switch>
        </div>
        </HashRouter>
        </>
        )}

export const AppRouter=（）=>{
返回(
//还是不行
)}

在我的页面中，我有：

<Router>
        <div>
        <Link to={'/page1'}>Page 1</Link>
        <Link to={'/page2'}>Page 2</Link>
        </div>
</Router>


第1页
第2页

有趣的是，它正在工作，但在我改变了组件的加载顺序后，它停止了工作。我如何调试这个？谢谢。
将路由器嵌套在路由器中可能会导致此类问题。单击

您可以更新顶部
元素中的历史堆栈，而不是

. 我认为如果你删除内部的
，一切都应该开始工作

export const AppRouter = () => {
  return (
    <>
      <HashRouter>
        <div>
          <Link to={"/page1"}>Page 1</Link>
          <Link to={"/page2"}>Page 2</Link>
        </div>
        <div>
          <Switch>
            <Route path="/page1" component={Page1} />
            <Route path="/page1" component={withRouter(Page2)} /> //still
            doesn't work
            <Route exact path="/" component={Home} />
          </Switch>
        </div>
      </HashRouter>
    </>
  );
};

export const AppRouter=（）=>{
返回(
第1页
第2页
//仍然
不起作用
);
};

祝你好运：）
在路由器中嵌套路由器可能会导致此类问题。单击

您可以更新顶部
元素中的历史堆栈，而不是

. 我认为如果你删除内部的
，一切都应该开始工作

export const AppRouter = () => {
  return (
    <>
      <HashRouter>
        <div>
          <Link to={"/page1"}>Page 1</Link>
          <Link to={"/page2"}>Page 2</Link>
        </div>
        <div>
          <Switch>
            <Route path="/page1" component={Page1} />
            <Route path="/page1" component={withRouter(Page2)} /> //still
            doesn't work
            <Route exact path="/" component={Home} />
          </Switch>
        </div>
      </HashRouter>
    </>
  );
};

export const AppRouter=（）=>{
返回(
第1页
第2页
//仍然
不起作用
);
};

祝您好运：）
页面组件上的
不是必需的，因为您正在另一个组件中定义
。此外，您可能有一个输入错误：

        <Route path="/page1" component={Page1} />
        <Route path="/page1" component={withRouter(Page2)} /> //still doesn't work
        <Route exact path="/" component={Home} />


//还是不行

当您在
组件上渲染
page2
时，第二行应该有
path='/page2'
。如果这对您有帮助，请告诉我。
页面组件上的
不是必需的，因为您正在另一个组件中定义
。此外，您可能有一个输入错误：

        <Route path="/page1" component={Page1} />
        <Route path="/page1" component={withRouter(Page2)} /> //still doesn't work
        <Route exact path="/" component={Home} />


//还是不行

当您在
组件上渲染
page2
时，第二行应该有
path='/page2'
。让我知道这是否对您有帮助。
我也遵循了这一点：显然，您不能在
路由器
之外有
链接
，
React
抛出错误。确切地说，链接元素是在第1页还是第2页？我会用一个工作示例更新我的帖子。我修复了你的沙盒，它们有很多错误。架构应该是这样的。如果您对结构有更多问题，可以给我发消息。顺便说一句，就像一个开关盒，第一个匹配路径是要渲染的路径，因此您应该在末尾放置“/”。我也遵循了这一点：显然，您不能在
路由器
之外有
链接
，
反应
抛出错误。确切地说，链接元素是否在第1页或第2页内？我会用一个工作示例更新我的帖子。我修复了你的沙盒，它们有很多错误。架构应该是这样的。如果您对结构有更多问题，可以给我发消息。顺便说一句，它就像一个开关盒，第一个匹配路径是要渲染的路径，因此您应该在末尾放置“/”。