使用 react-router 无法加载路由

Question

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

我有一个 Navbar 组件，我将简要介绍它的要点。

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')
);

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

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

这里最让我担心的是，我最终想添加额外的页面，这些页面不仅包含相同的Navbar ，而且它们的页面链接也存在于这个 Navbar 中。 例如，如果我添加了一个About页面，这个页面不仅会包含 Navbar，而且它的链接也会出现在这个 Navbar 中！

有没有办法可以在导航栏中保留此类自页面链接，而不会发生递归渲染循环？

Answer 1

问题

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

换句话说， BlogHome呈现一个Navar ，它呈现一个BlogPost ，然后呈现另一个Navbar和另一个令人作呕的BlogPost广告。

解决方案

重组你的导航栏和路线，把它们分开

index.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 组件中删除 Navbar，因为当位置更改时，它会在此处切换组件

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

会坚持下去。