Javascript 无法使用react路由器加载路由

我正在使用

createreact应用程序

设计一个简单的应用程序，最近我深入研究了

react路由器

的功能。然而，我遇到了一个问题，页面在尝试加载时被卡住了，我不知道为什么

我有一个导航栏组件，我将浓缩它的要点

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Link，Switch，Route}；
从“../Pages/BlogPost”导入BlogPost；
//因为很多细节都是不必要的，没有人喜欢不需要的代码块
类Navbar扩展了React.Component{
render（）{
返回(

主页
关于

);
}
}
函数About（）{
返回关于页面。；
}
导出默认导航栏；

BlogPost

表示本身就是页面的组件。代码如下所示。再一次，我将从无关的东西中抽象出来

从“React”导入React；
从“../Components/Navbar”导入Navbar；
//此页上的其他组件。它们都没有参考导航栏或包含自己的路由器。
从“../Sections/BlogBox”导入BlogBox；
从“../Components/CommentForm”导入CommentForm；
从“../Sections/CommentBox”导入CommentBox；
类BlogPost扩展了React.Component{
getBlogPost（地址）{
//使用“获取”从中获取博客数据（如标题、描述、内容、图像等）
//“地址”处的API。由于不相关而被抽象掉。
}
componentDidMount（）{
log（“博客帖子挂载！”）；
这是一个.getBlogPost（“http://localhost:8080/api/blog/samplepost");
}
render（）{
返回(
);
}   
}
导出默认博客帖子；

我的应用程序主页位于

“/”

。它在我的

index.js

文件中呈现，其代码如下

从“React”导入React；
从“react dom”导入react dom；
从“./Pages/BlogHome”导入BlogHome；
从“./Pages/BlogPost”导入BlogPost；
ReactDOM.render(
,
document.getElementById（'root'））
);

主页呈现良好，但当我导航到

/post

时，应用程序试图无限期加载页面，最终超时，无法加载

请注意

BlogPost

页面组件如何呈现

Navbar

组件，该组件又有一个路径

/post

，该路径呈现

BlogPost

对象？我不确定我是否能改变这个。这可能是

/post

路径无法加载的原因吗

这里最让我担心的是，我最终想添加额外的页面，这些页面不仅包含相同的

导航栏

，而且它们的页面链接也存在于导航栏中。例如，如果我添加一个关于页面，该页面不仅包含导航栏，而且其链接也将出现在该导航栏中

---

有没有一种方法可以在导航栏中保留这样的自页面链接，而不发生递归渲染循环？

尝试删除BlogPost组件中的导航栏，因为当位置更改时，它会在此处切换组件

及

主页
关于

将发行。

发行 当当前路径与“/post”匹配时，您将在呈现

Navbar

和

BlogPost

之间创建一个循环

换句话说，

BlogHome

呈现一个

Navar

，该Navar呈现一个

BlogPost

，然后呈现另一个

Navbar

和另一个

BlogPost

解决方案 重新调整导航栏和路线，将它们分开

index.js

由于

BlogHome

听起来像是一个页面，它应该放在自己的路径上。将

Router

移动到此处以包装整个应用程序。渲染

BlogHome

路径时，路径最后一个匹配所有路径前缀，因此如果

开关在其上方没有匹配其他路径，它将渲染

ReactDOM.render(
    <Router>
      <Switch>
        <Route path='/post' component={BlogPost} />
        <Route path='/about'>
          <About />
        </Route>
        <Route path="/" component={BlogHome} />
      </Switch>
    </Router>,
    document.getElementById('root')
);

ReactDOM.render(
,
document.getElementById（'root'））
);

导航栏

移除路由器和路由，仅保留链接

class Navbar extends React.Component {
  render() {
    return (
      <nav>
        <div id="navigationlinks">
          <ul id="navlinks-left">
              <li className="nav-item"><Link to='/'>Home</Link></li>
            <li className="nav-item"><Link to='/about'>About</Link></li>
          </ul>
        </div>
      </nav>
    );
  }
}

类导航栏扩展了React.Component{
render（）{
返回(

主页
关于

);
}
}

现在，每个页面都可以自由地呈现
导航栏
。
这可能正是它超时的原因，似乎您已经创建了一个递归呈现循环。“主页”是什么，在哪里“路线？即，什么是呈现
？为什么要再次渲染
NavBar
？通常，这将在它导航到的路线之外呈现。@drewrese这些优秀的问题。我已经更新了问题，将代码包含在我的
index.js
文件中。
BlogHome
组件也包含
Navbar
对象，但它的渲染效果很好，可能是因为目前没有
Route
服务于基本路径
/
。至于我为什么重新渲染
Navbar
对象，我通常在应用程序的每个页面顶部渲染它因此，我认为我可以将
react-router
合并到这个组件se中