Question

在React中刷新页面时出现了一个奇怪的问题。

它在URL的末尾添加了一个/，这导致了实时服务器上的目录列表。

刷新时，

localhost：3000 / projects继续显示相同的URL

但

时

localhost：3000 / blog刷新后变为localhost：3000 / blog /

有人遇到过这个吗？试图找到一个开始寻找解决方案的地方，因为它只发生在这个页面上。

如果需要，很高兴在这里发布代码。

这可以在网站上看到www.trevorrwarduk.me转到博客并刷新。

App.js

var React                 = require('react');
var ReactRouter           = require('react-router-dom');
var Router                = ReactRouter.BrowserRouter;
var Route                 = ReactRouter.Route;
var Switch                = ReactRouter.Switch;
var BrowserHistory        = ReactRouter.BrowserHistory;

var HeadingSection        = require('./HeadingSection');
var Home                  = require('./Home');
var Projects              = require('./Projects');
var Me                    = require('./Me');
var Blog                  = require('./Blog');
var NotFound              = require('./NotFound');
var RightSideBar          = require('./RightSideBar');

class App extends React.Component {
  render() {
    return (
      <Router history={BrowserHistory}>
        <div className="container greenBack">
          <div className="row headingArea">
            <HeadingSection />
          </div>
          <div className="row bottomArea">
            <div className="col-sm-1"></div>
            <div className="col-sm-10 contentArea">
              <Switch>
                <Route exact={true} path='/'          component={Home} />
                <Route exact={true} path='/projects'  component={Projects} />
                <Route exact={true} path='/me'        component={Me} />
                <Route exact={true} path='/blog'      component={Blog} />
                <Route path="/*"                      component={NotFound} status={404} />
              </Switch>
            </div>
            <div className="col-sm-1"><RightSideBar /></div>
          </div>
        </div>
      </Router>
    );
  }
}

module.exports = App;

htaccess文件

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !=/favicon.ico
  RewriteRule ^ index.html [L]
</IfModule>

Answer 1

由于/blog重定向到/blog/并显示目录列表，因此服务器上必须存在/blog目录。当请求/blog时，服务器正在为实际目录提供服务，而不是处理请求的React Router。

删除或重命名服务器上的/blog目录，以便React Router处理请求。

ReactJS刷新URL更改

1 个答案: