当直接在浏览器中请求时，React Router 仅渲染基本路径（/）并为其他路径抛出错误

Posted 2023-02-22

【中文标题】当直接在浏览器中请求时，React Router 仅渲染基本路径（/）并为其他路径抛出错误

【英文标题】：React Router rendering only base path (/) and throwing error for other paths when requested directly in the browser

【发布时间】：2018-09-11 01:19:54

【问题描述】：

我是 ReactJS 的新手，遇到了路由问题。这是我定义了 React 路由器的 App.js 文件。

import React from "react";
import  BrowserRouter as Router, Route, Link  from "react-router-dom";

import Home from "./Home";
import About from "./About";
import Feedback from "./Feedback"
import Chunking from "./Chunking"

export default class App extends React.Component 
  render() 
    return(
      <Router>
        <div>
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <Link class="nav-item nav-link" to="/">Home <span class="sr-only">(current)</span></Link>
                <Link class="nav-item nav-link" to="/about">About</Link>
                <Link class="nav-item nav-link" to="/feedback">Feedback</Link>
                <Link class="nav-item nav-link" to="/chunking">Chunking</Link>
              </div>
            </div>
          </nav>

          <hr class="my-4" />

          <div id="mainContentContainer">
            <Route exact path="/" component=Home />
            <Route path="/about" component=About />
            <Route path="/feedback" component=Feedback />
            <Route path="/chunking" component=Chunking />
          </div>

        </div>
      </Router>
    );
  

当我启动服务器并在浏览器中呈现页面时，页面加载完美。

即使是导航栏中的链接也能完美运行。单击导航栏中的链接会呈现相应的组件。

问题是，当我尝试使用完整路径名加载页面时，我无法呈现页面。喜欢：- http://localhost:8080/about http://localhost:8080/feedback

该页面仅针对 url http://localhost:8080/ 呈现

我可以从主页导航到所有其他页面，但是当我在浏览器中输入 url http://localhost:8080/about 并按 Enter 时，我收到了这样的错误 -

About 组件类如下所示 -

import React from "react";

export default class About extends React.Component 
  render() 
      return (
         <div>
            <h2>About Page</h2>
         </div>
      );
   

当直接请求时，如何让其他 url 在我的应用程序中工作？

【参考方案1】：

当您键入localhost:8080/about 时，浏览器会向您的服务器发出请求，显然您的服务器不知道它必须在/ 之外的其他路由上加载您的反应代码。确保你正确配置你的服务器（例如独立于路由渲染相同的反应代码），然后反应路由器将能够处理你的路由。

【讨论】：

Make sure you configure your server correctly (for example to render the same react code independent of the route)，这就是我想要理解的。 React 教程都没有涵盖这部分。另外，我的是一个简单的带有 Webpack 的 ReactJS 项目，我在这里没有什么花哨的。

如果你使用 create-react-app 来创建你的应用，它不需要额外的配置就可以工作。

【参考方案2】：

这可能是 @user3526468 所说的服务配置。尝试在您的webpack.config.js > devServer 中修改它：

devServer = 
        host: 'localhost',
        port: 8080,
        contentBase: PATH.join(__dirname, '/src'), // This is were I store content of my project. Ir your case, could be different
        hot: true,
        inline: true,
        historyApiFallback: true // THIS LINE WILL SOLVE YOUR PROBLEM
    ;

希望它能解决您的问题。问候。