我正在使用React-router,当我点击链接按钮时,它工作得很好,但当我刷新我的网页时,它没有加载我想要的东西。

例如,我在localhost/joblist和一切都很好,因为我到达这里按下一个链接。但如果我刷新网页,我会得到:

Cannot GET /joblist

默认情况下,它不是这样工作的。最初我有我的URL localhost/#/和localhost/#/joblist,他们工作得很好。但我不喜欢这种类型的URL,所以试图删除#,我写道:

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

这个问题不会发生在localhost/,这个总是返回我想要的。

这个应用程序是单页的,所以/joblist不需要向任何服务器询问任何事情。

我的整个路由器。

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

当前回答

你可以在你的React应用程序中使用Vercel的主机,并使用相同的旧方式在你的React应用程序中使用BrowserRouting。

您需要添加一个vercel。Json文件在你的项目的根,并添加以下代码:

{
  "rewrites": [
    {
      "source": "/((?!api/.*).*)",
      "destination": "/index.html"
    }
  ]
}

这工作得非常好。

其他回答

用Laravel在React中实现JavaScript SPA的解决方案

公认的答案是对为什么会发生这样的问题的最好解释。如前所述,您必须同时配置客户端和服务器端。

在你的blade模板中,包括JavaScript绑定文件,确保像这样使用URL外观:

<script src="{{ URL::to('js/user/spa.js') }}"></script>

在路由中,确保将此添加到刀片模板所在的主端点。例如,

Route::get('/setting-alerts', function () {
   return view('user.set-alerts');
});

以上是刀片模板的主要端点。现在再添加一条可选路线,

Route::get('/setting-alerts/{spa?}', function () {
  return view('user.set-alerts');
});

发生的问题是,首先加载刀片模板,然后加载React路由器。当你加载'/setting-alerts'时,它会加载HTML内容和JavaScript代码。

但是当你加载'/setting-alerts/about'时,它首先在服务器端加载。因为它在服务器端,所以这个位置上没有任何东西,并且它返回not found。当你有可选的路由器时,它加载同一个页面,React路由器也被加载,然后React加载器决定显示哪个组件。

我使用React.js + Webpack模式。我在package中添加了——history-api-fallback参数。json文件。此时页面刷新工作正常。

每次我修改代码时,网页都会自动刷新。

"scripts": {
  "start": "rimraf build && cross-env NODE_ENV='development' webpack --mode development && cross-env NODE_ENV=development webpack-dev-server --history-api-fallback",
  ...
}

前面的答案并不能解决您想要使用代理通道的浏览器路由器,而又不能使用root的问题。

对我来说,解决办法很简单。

假设您有一个指向某个端口的URL。

location / {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
  port_in_redirect    off;
}

现在由于浏览器路由器,子路径被破坏了。但是,你知道子路径是什么。

这个问题的解决方案是什么?对于子路径/联系人

# Just copy paste.
location /contact/ {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
}

我试过的其他方法都不管用,但这个简单的方法奏效了。

为乔舒亚·戴克的答案添加更多信息。

如果你正在使用Firebase,并且想同时使用根路由和子目录路由,你需要在你的Firebase .json中添加以下代码:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/subdirectory/**",
        "destination": "/subdirectory/index.html"
      }
    ]
  }
}

例子:

你正在为客户建立一个网站。您希望网站的所有者在https://your.domain.com/management中添加信息,而网站的用户将导航到https://your.domain.com。

在这种情况下,您的火源。Json文件是这样的:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/management/**",
        "destination": "/management/index.html"
      }
    ]
  }
}

试着加一个”。Htaccess "文件内的公共文件夹与下面的代码。

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]