无法使用反应路由器加载路由

Question

我正在使用create-react-app设计一个简单的应用程序，我最近深入研究了react-router的强大功能。但是，我在尝试加载页面时遇到问题，我不确定为什么。

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

import React from 'react';
import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom';
import BlogPost from '../Pages/BlogPost';
// Condensed because a lot of the detail is unnecessary and no-one likes blocks of unneeded code
class Navbar extends React.Component {
render() {
return (
<Router>
<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>
<Switch>
<Route path='/post' component={BlogPost} />
<Route path='/about'>
<About />
</Route>
</Switch>
</Router>
);
}
}
function About() {
return <h2>The about page.</h2>;
}
export default Navbar;

BlogPost表示本身就是页面的组件。代码如下所示。同样，我将抽象出不相关的东西。

import React from 'react';
import Navbar from '../Components/Navbar';
// Other components on this page. None of them reference the navbar or contain a router of their own.
import BlogBox from '../Sections/BlogBox';
import CommentForm from '../Components/CommentForm';
import CommentBox from '../Sections/CommentBox';
class BlogPost extends React.Component {

getBlogPost(address) {
// Gets blog data (like the title, description, content, image, etc.) using 'fetch' from 
// an API at 'address'. Abstracted away because this isn't relevant.
}
componentDidMount() {
console.log("Blog post mounted!");
this.getBlogPost("http://localhost:8080/api/blog/samplepost");
}
render() {
return (
<div className="blog-post">
<Navbar />
<BlogBox post={this.state ? this.state.post : ""}/>
<CommentForm />
<CommentBox comments={this.state ? this.state.comments: ""} />
</div>
);
}   
}
export default BlogPost;

我的应用程序的主页位于'/'.它呈现在我的index.js文件中，其代码如下。

import React from 'react';
import ReactDOM from 'react-dom';
import BlogHome from './Pages/BlogHome';
import BlogPost from './Pages/BlogPost';
ReactDOM.render(
<BlogHome />,
document.getElementById('root')
);

主页呈现正常，但是当我导航到/post时，应用程序会尝试无限期加载页面，最终超时，无法这样做。

请注意BlogPost页组件如何呈现Navbar组件，而组件又具有呈现BlogPost对象的路径/post？我不确定我是否能够改变这一点。这可能是/post路径无法加载的原因吗？

我在这里最担心的是，我最终想添加其他页面，这些页面不仅包含相同的Navbar，而且它们的页面链接也存在于此导航栏中。例如，如果我添加一个"关于"页面，则此页面不仅包含导航栏，而且其链接也将出现在此导航栏中！

有没有办法在导航栏中保留这样的自页链接，而不会发生递归渲染循环？

Answer 1

问题

您正在渲染Navbar和当前路径与"/post"匹配时BlogPost之间创建一个循环。

换句话说，BlogHome渲染一个Navar，该渲染一个BlogPost，然后渲染另一个Navbar和另一个令人作呕的BlogPost。

溶液

稍微重组导航栏和路由以拆分它们

索引.js

由于BlogHome听起来像一个页面，因此应该将其放置在自己的路线上。Router移至此处以包装整个应用。最后渲染BlogHome路径，因为它匹配所有路径前缀，因此如果Switch没有其他路由匹配，它将呈现。

ReactDOM.render(
<Router>
<Switch>
<Route path='/post' component={BlogPost} />
<Route path='/about'>
<About />
</Route>
<Route path="/" component={BlogHome} />
</Switch>
</Router>,
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>
);
}
}

现在，每个页面都应该可以自由地呈现或不呈现Navbar。

Answer 2

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

<Switch>
<Route path='/post' component={BlogPost} />
<Route path='/about'>
<About />
</Route>
</Switch>

和

<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>

会佩西特。