手动刷新或写入时,React-router URL不起作用

Question

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

例如,我进入localhost/joblist,一切都很好,因为我来到这里按一个链接.但是,如果我刷新网页,我得到:不能GET/joblist

默认情况下它没有像这样工作.最初我有我的URL:localhost /#/和localhost /#/ joblist,他们工作得非常好.但是我不喜欢这种网址,所以试图抹去我写的'#':

Cannot GET /joblist

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

编辑:这个应用程序是单页面,因此/ joblist不需要向任何服务器询问任何内容.

EDIT2:我的整个路由器.

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

Answer 1

_{看看对已接受答案的评论和这个问题的一般性质("不工作"),我认为这可能是对这里涉及的问题进行一些一般性解释的好地方.因此,这个答案旨在作为OP的具体用例的背景信息/详细说明.请多多包涵.}

服务器端与客户端

要理解这一点的第一件大事是,现在有2个地方可以解释URL,而过去只有1个地方.在过去,当生活很简单时,一些用户向http://example.com/about服务器发送了一个请求,该服务器检查了URL的路径部分,确定用户正在请求about页面,然后发回该页面.

使用React-Router提供的客户端路由,事情就不那么简单了.起初,客户端尚未加载任何JS代码.所以第一个请求将永远是服务器.然后,它将返回一个页面,其中包含所需的脚本标记以加载React和React Router等.只有当这些脚本加载时才会启动第2阶段.在阶段2中,例如,当用户点击"关于我们"导航链接时,URL 仅在本地更改为http://example.com/about(由历史API实现),但不会向服务器发出请求.相反,React Router在客户端执行它的操作,确定要呈现和呈现的React视图.假设您的about页面不需要进行任何REST调用,那么它已经完成了.您已经从Home转换为About Us而没有任何服务器请求被解雇.

因此,基本上当您单击链接时,会运行一些Javascript来操作地址栏中的URL,而不会导致页面刷新,从而导致React Router 在客户端执行页面转换.

但现在考虑如果您将URL复制粘贴到地址栏并通过电子邮件发送给朋友,会发生什么.您的朋友尚未加载您的网站.换句话说,她仍处于第一阶段.没有React Router正在她的机器上运行.所以,她的浏览器将使服务器的请求来http://example.com/about.

这就是你的麻烦开始的地方.到目前为止,只需在服务器的webroot上放置静态HTML即可.但是,当从服务器请求时,这会给404所有其他URL 带来错误.这些相同的URL 在客户端工作正常,因为React Router正在为您执行路由,但它们在服务器端失败,除非您让服务器了解它们.

结合服务器端和客户端路由

如果您希望http://example.com/aboutURL在服务器端和客户端都可以工作,则需要在服务器端和客户端为它设置路由.有道理吗？

这就是你的选择开始的地方.解决方案包括完全绕过问题,通过返回引导HTML的全能路由,以及服务器和客户端运行相同JS代码的全面同构方法.

.

完全绕过问题:哈希历史

使用哈希历史而不是浏览器历史记录,about页面的URL将如下所示: http://example.com/#/about hash(#)符号后面的部分不会发送到服务器.因此,服务器只能http://example.com/按预期查看和发送索引页.React-Router将获取该#/about部件并显示正确的页面.

缺点:

• '丑陋'的网址
• 使用此方法无法进行服务器端呈现.就搜索引擎优化(SEO)而言,您的网站由一个页面组成,几乎没有任何内容.

.

包罗万象

使用这种方法,您可以使用浏览器历史记录,但只需在发送/*到的服务器上设置一个catch-all,从而index.html有效地为您提供与Hash History相同的情况.但是,您确实拥有干净的URL,您可以在以后改进此方案,而不必使用户的所有收藏夹无效.

缺点:

• 设置起来比较复杂
• 仍然没有好的SEO

.

混合动力

在混合方法中,您可以通过为特定路由添加特定脚本来扩展catch-all场景.您可以制作一些简单的PHP脚本来返回包含内容的网站最重要的页面,因此Googlebot至少可以查看您网页上的内容.

缺点:

• 设置起来更复杂
• 对于那些你给予特殊待遇的路线,只有优秀的SEO
• 复制用于在服务器和客户端上呈现内容的代码

.

同构

如果我们使用Node JS作为我们的服务器,那么我们可以在两端运行相同的 JS代码怎么办？现在,我们在单个react-router配置中定义了所有路由,我们不需要复制渲染代码.这可以说是"圣杯".如果在客户端上发生页面转换,服务器将发送完全相同的标记.该解决方案在SEO方面是最佳的.

缺点:

• 服务器必须(能够)运行JS.我已经尝试过Java icw Nashorn,但它并不适合我.在实践中,它主要意味着您必须使用基于Node JS的服务器.
• 许多棘手的环境问题(window在服务器端使用等)
• 陡峭的学习曲线

.

我应该使用哪个？

选择你可以逃脱的那个.就我个人而言,我认为这一切都足够简单,可以设置出最低限度.此设置允许您随着时间的推移改进.如果您已经使用Node JS作为服务器平台,我肯定会调查一个同构应用程序.是的,一开始很难,但一旦掌握了它,它实际上是解决问题的一个非常优雅的解决方案.

所以基本上,对我来说,那将是决定因素.如果我的服务器在Node JS上运行,我会变得同构,否则我会选择Catch-all解决方案并随着时间的推移扩展它(混合解决方案)并且SEO要求它.

如果您想了解有关使用React进行同构(也称为"通用")渲染的更多信息,可以参考以下主题:

• 使用同构应用程序对未来做出反应
• 在ReactJS中创建同构应用程序的痛苦和喜悦
• 如何实现Node + React同构JavaScript及其重要性

另外,为了帮助您入门,我建议您查看一些入门套件.选择一个符合您对技术堆栈的选择(请记住,React只是MVC中的V,您需要更多东西来构建完整的应用程序).首先看看Facebook本身发布的那个:

• 创建React应用程序

或者从社区中挑选其中一个.现在有一个很好的网站试图索引所有这些:

• 选择你完美的React启动项目

我从这些开始:

• React Isomorphic Starterkit
• React Redux Universal热门示例

目前我使用的是通用渲染的家庭酿造版本,其灵感来自上面的两个入门套件,但它们现在已经过时了.

祝你好运!

Answer 2

这里的答案都非常有用,对我来说有用的是配置我的Webpack服务器以期望路由.

devServer: {
   historyApiFallback: true,
   contentBase: './',
   hot: true
},

historyApiFallback是我解决这个问题的原因.现在路由工作正常,我可以刷新页面或直接输入URL.无需担心节点服务器上的解决方法.这个答案显然只有在你使用webpack时才有效.

编辑:请在此处查看我的答案,了解为何需要更详细的原因:https: //stackoverflow.com/a/37622953/5217568

Answer 3

你可以改变你的htaccess并插入:

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

我使用react: "^15.3.2", react-router: "^3.0.0",history: "^4.3.0",

Answer 4

对于React Router V4用户:

如果您尝试通过其他答案中提到的哈希历史技术解决此问题,请注意

<Router history={hashHistory} >

在V4中不起作用,请HashRouter改用:

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

参考:https: //reacttraining.com/react-router/web/api/HashRouter

Answer 5

可以通过两种不同的方式调用路由器,具体取决于导航是在客户端还是在服务器上进行.您已将其配置为客户端操作.关键参数是run方法的第二个,即位置.

当您使用React Router Link组件时,它会阻止浏览器导航并调用transitionTo来执行客户端导航.您正在使用HistoryLocation,因此它使用HTML5历史记录API通过模拟地址栏中的新URL来完成导航错觉.如果您使用的是较旧的浏览器,则无法使用.您需要使用HashLocation组件.

当您点击刷新时,您将绕过所有React和React路由器代码.服务器获取请求/joblist,它必须返回一些东西.在服务器上,您需要将请求的路径传递给run方法,以便呈现正确的视图.您可以使用相同的路线图,但您可能需要拨打不同的电话Router.run.正如Charles指出的那样,您可以使用URL重写来处理这个问题.另一种选择是使用node.js服务器来处理所有请求,并将路径值作为location参数传递.

例如,在express中,它可能如下所示:

var app = express();

app.get('*', function (req, res) { // This wildcard method handles all requests

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

请注意,请求路径正在传递给run.要做到这一点,您需要有一个服务器端视图引擎,您可以将呈现的HTML传递给.renderToString在服务器上使用和运行React 还有许多其他注意事项.在服务器上呈现页面后,当您的应用程序加载到客户端时,它将再次呈现,根据需要更新服务器端呈现的HTML.

Answer 6

在index.html中head,添加以下内容:

<base href="/">
<!-- This must come before the css and javascripts -->

然后在使用webpack dev server运行时使用此命令.

webpack-dev-server --mode development --hot --inline --content-base=dist --history-api-fallback

--history-api-fallback 是重要的部分

Answer 7

我刚刚使用create-react-app创建了一个网站,并且在这里提出了相同的问题.我BrowserRouting从react-router-dom包中使用.我在Nginx服务器上运行,为我解决的是添加以下内容/etc/nginx/yourconfig.conf

location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

这对应于.htaccess在运行Appache时添加以下内容

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

这似乎也是Facebook自己提出的解决方案,可以在这里找到

Answer 8

Webpack Dev Server有一个选项来启用它.打开package.json并添加--history-api-fallback.这个解决方案对我有用.

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls#configuring-your-server

Answer 9

这可以解决您的问题

我在生产模式下的ReactJS应用程序中也遇到了同样的问题.这是问题的2解决方案.

1.将路由历史记录更改为"hashHistory"而不是browserHistory

<Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
</Router>

现在使用该命令构建应用程序

sudo npm run build

然后将build文件夹放在var/www /文件夹中,现在应用程序正常工作,在每个url中添加了#tag.喜欢

localhost /#/ home localhost /#/ aboutus

解决方案2:没有使用browserHistory的#tag,

在您的路由器中设置您的历史记录= {browserHistory},现在使用sudo npm run build构建它.

您需要创建"conf"文件来解决404未找到的页面,conf文件应该是这样的.

打开你的终端输入以下命令

cd/etc/apache2/sites-available ls nano sample.conf在其中添加以下内容.

<VirtualHost *:80>
    ServerAdmin admin@0.0.0.0
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

现在,您需要使用以下命令启用sample.conf文件

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

然后它会要求你重新加载apache服务器,使用sudo service apache2 reload或restart

然后打开localhost/build文件夹并添加包含以下内容的.htaccess文件.

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

现在应用程序正常运行.

注意:将0.0.0.0 ip更改为本地IP地址.

如果对此有任何疑问,请随时提出评论.

我希望它对其他人有所帮助.

Answer 10

如果您通过AWS Static S3 Hosting和CloudFront托管react应用程序

这个问题由CloudFront以403 Access Denied消息响应,因为它预期/某些/其他/路径存在于我的S3文件夹中,但该路径仅存在于React与react-router的路由中.

解决方案是设置分发错误页面规则.转到CloudFront设置并选择您的分发.接下来转到"错误页面"选项卡.单击"创建自定义错误响应"并为403添加条目,因为这是我们获得的错误状态代码.将响应页面路径设置为/index.html,将状态代码设置为200.最终结果令我惊讶于它的简单性.提供了索引页面,但URL保留在浏览器中,因此一旦反应应用程序加载,它就会检测URL路径并导航到所需的路径.

错误页面403规则

Answer 11

如果您使用nginx托管并需要快速修复...

将以下行添加到location块内的 nginx 配置中：

location / {
  try_files $uri /index.html;
}

Answer 12

将此添加到webpack.congif.js

devServer: {
    historyApiFallback: true
}

Answer 13

生产堆栈:React,React Router v4,BrowswerRouter,Express,Nginx

1)用户浏览器路由器,用于漂亮的网址

// app.js

import { BrowserRouter as Router } from 'react-router-dom'

const App = () {
  render() {
    return (
        <Router>
           // your routes here
        </Router>
    )
  }
}

2)通过使用将index.html添加到所有未知请求 /*

// server.js

app.get('/*', function(req, res) {   
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

3)捆绑webpack webpack -p

4)跑nodemon server.js或node server.js

编辑:你可能想让nginx在服务器块中处理这个并忽略第2步:

location / {
    try_files $uri /index.html;
}

Answer 14

如果您使用的是Create React App：

有一个伟大的步行路程，虽然这个问题与许多大型主机平台的解决方案，你可以找到这里的创建做出反应应用页面上。例如，我将React Router v4和Netlify用作前端代码。只需要在我的公用文件夹中添加一个文件（“ _redirects”），然后在该文件中添加一行代码即可：

/*  /index.html  200

现在，当输入浏览器或有人刷新时，我的网站可以正确呈现诸如mysite.com/pricing之类的路径。

Answer 15

我使用 React Router (Apache) 找到了SPA的解决方案。只需将其添加到文件.htaccess中：

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

来源：React Router 的 Apache 配置

Answer 16

如果您在IIS上托管react应用，只需添加一个web.config文件，其中包含：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

这将告诉IIS服务器将主页返回到客户端而不是404错误，并且不需要使用哈希历史记录。

Answer 17

如果您在后端使用Express.js或其他框架，您可以添加如下类似的配置，并查看配置中的 Webpack 公共路径。如果您使用的是 BrowserRouter，即使重新加载它也应该可以正常工作。

expressApp.get('/*', (request, response) => {
    response.sendFile(path.join(__dirname, '../public/index.html'));
});

Answer 18

尝试使用以下代码在公用文件夹中添加".htaccess"文件.

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

RewriteRule ^ /index.html [L]  

Answer 19

如果您使用的是 firebase，您所要做的就是确保您的应用根目录下的 firebase.json 文件中有一个 rewrites 属性（在托管部分）。

例如：

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

希望这可以为其他人节省大量的挫折和浪费的时间。

快乐编码...

关于该主题的进一步阅读：

https://firebase.google.com/docs/hosting/full-config#rewrites

Firebase CLI：“配置为单页应用程序（将所有网址重写为 /index.html）”

Answer 20

如果您确实对 index.html 有回退，请确保在您的 index.html 文件中包含以下内容：

<script>
  System.config({ baseURL: '/' });
</script>

这可能因项目而异。

Answer 21

对于那些使用 IIS 10 的人来说，这是您应该做的事情才能做到这一点。请确保您正在使用 browserHistory。至于参考我会给出路由的代码，但这并不重要，重要的是下面的组件代码之后的下一步：

class App extends Component {
    render() {
        return (
            <Router history={browserHistory}>
                <div>
                    <Root>
                        <Switch>
                            <Route exact path={"/"} component={Home} />    
                            <Route path={"/home"} component={Home} />
                            <Route path={"/createnewproject"} component={CreateNewProject} />
                            <Route path={"/projects"} component={Projects} />
                            <Route path="*" component={NotFoundRoute} />
                        </Switch>
                    </Root>
                </div>
            </Router>
        )
    }
}
render (<App />, window.document.getElementById("app"));

由于问题是 IIS 接收来自客户端浏览器的请求，它会将 URL 解释为请求页面，然后由于没有可用页面而返回 404 页面。请执行下列操作：

1. 打开 IIS
2. 展开服务器然后打开站点文件夹
3. 单击网站/应用程序
4. 转到错误页面
5. 打开列表中的404错误状态项
6. 而不是“将静态文件中的内容插入到错误响应中”选项，而是将其更改为“在此站点上执行 URL”并将“/”斜杠值添加到 URL。

现在它可以正常工作了。

我希望它有帮助。:-)

Answer 22

使用ReduxHashRouter也对我有用。只需简单地替换：

import {
    Router //replace Router
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
        <Provider store={Store}>
            <Router history={history}> // Replace here saying Router
                <Layout/>
            </Router>
        </Provider>
    </LocaleProvider>, document.getElementById("app"));

registerServiceWorker();

和：

import {
    HashRouter // Replaced with HashRouter
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
        <Provider store={Store}>
            <HashRouter history={history}> //replaced with HashRouter
                <Layout/>
            </HashRouter>
        </Provider>
    </LocaleProvider>, document.getElementById("app"));

registerServiceWorker();