React路由器在浏览器中直接请求时，只呈现基本路径(/)，并抛出其他路径的错误

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

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

甚至Navbar中的链接也在完美地工作。单击Navbar中的链接就会呈现相应的组件。

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

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