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

Question

我是 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 在我的应用程序中工作？

Answer 1

正如@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
    };

我希望它能解决你的问题。问候。

Answer 2

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