Reactjs 手动更改URL时反应路由不工作|反应路由器4

当URL通过React路由器的链接组件更改时，我的路由工作正常。然而，若我试图在浏览器中手动更改URL，它会出现404错误

下面是routes.js文件

import React from "react";
import {Route, Switch, NotFoundRoute} from 'react-router-dom';
import App from "./components/app.jsx";
import HomePage from "./components/homePage.jsx";
import AboutPage from "./components/about/aboutPage.jsx";
import AuthorPage from "./components/authors/authorPage.jsx";
import ManageAuthorPage from "./components/authors/manageAuthorPage.jsx";
import NotFoundPage from "./components/notFoundPage.jsx";

var routes = (
    <App>
        <Switch>
            <Route name="home" exact path="/" component={HomePage} />
            <Route name="authors" exact path="/authors" component={AuthorPage} />
            <Route name="addAuthor" exact path="/author" component={ManageAuthorPage} />
            <Route name="manageAuthor" path="/author/:id" component={ManageAuthorPage} />
            <Route name="about" exact path="/about" component={AboutPage} />
            <Route component={NotFoundPage} />
        </Switch>
    </App>
);

export default routes;

我曾尝试在多个来源上寻找解决方案，但每个人似乎都遵循与我类似的方法！

---

请看一看。提前感谢：）

使用

BrowserRouter

时，您需要在网页包中添加

historrapifallback:true

将此添加到您的网页包配置

devServer: {
    historyApiFallback: true,
  },

大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大

historyApiFallback = require('connect-history-api-fallback')


//start a local dev server
gulp.task('connect', function() {
  connect.server({
    root: ['dist'],
    port: config.port,
    base: config.devBaseUrl,
    livereload: true,
    middleware: [ historyApiFallback() ]
  });
});

---

如果您使用的是webpack dev server，请参阅链接以了解更多详细信息。设置：

devServer{
  //...
  historyApiFallback: true
}

它将提供“index.html”来代替任何404响应

如果您已发布到服务器。请确保服务器配置重定向到主html

快递：

app.get('/*', function(req, res) {
    res.sendfile('index.html');
});

大口连接：

connect.server({
  root: ['dist'],
  port: config.port,
  base: config.devBaseUrl,
  livereload: true,
  fallback: 'index.html'
});

这对我很有用：

  var historyApiFallback = require('connect-history-api-fallback');

  gulp.task('connect', function() {
    connect.server({
      root: ['dist'],
      port: config.port,
      base: config.devBaseUrl,
      livereload: true,
      middleware: function(connect, opt) {
        return [
          historyApiFallback({})
        ]
      }
    });
  });

---

感谢@Shubham Khatri和@LinJI的帮助

谢谢LinJI的建议，但我不使用webpack。我使用的是Gulp+Browserify。Browserify有类似的方法吗？或者我应该切换到webpack吗？您使用什么技术作为服务器？如果您根本不在服务器上运行，您必须使用HashRouter而不是BrowserRouter…我使用node作为我的开发服务器。但我发现问题不在于我的客户端路由（HashRouter或BrowserRouter）。浏览器路由器工作正常。但是服务器端路由（用于手动命中随机URL）没有得到处理。所以我计划为相同的应用集成Express。假设您有一个名为index.html的文件。。。localhost:xxxx会将此文件发送到客户端。但是，当您使用BrowserRouter localhost:xxxx/a时，会响应404，因为您没有在服务器上指定正确的路由。谢谢您的建议，Shubham，但我没有使用webpack。我使用的是Gulp+Browserify。对于Browserify是否有类似的方法，或者我是否应该切换到webpack？再次添加了对应的一大口，以获得答案Shubham。我尝试将上述模块集成到我的gulpfile.js中，但无法将代码放在正确的位置。你能看看上面问题中更新的gulpfile.js吗？更新了，你能检查一下吗？非常感谢Shubham。这终于奏效了。你给出的解决方案有一点变化（见下面我的答案）。。。继续努力！

app.get('/*', function(req, res) {
    res.sendfile('index.html');
});

connect.server({
  root: ['dist'],
  port: config.port,
  base: config.devBaseUrl,
  livereload: true,
  fallback: 'index.html'
});

  var historyApiFallback = require('connect-history-api-fallback');

  gulp.task('connect', function() {
    connect.server({
      root: ['dist'],
      port: config.port,
      base: config.devBaseUrl,
      livereload: true,
      middleware: function(connect, opt) {
        return [
          historyApiFallback({})
        ]
      }
    });
  });