Question

我正在使用react路由器，但是当我尝试重新加载某些视图时遇到问题。这是我的代码

路由器文件

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;

/*Windows*/
var Index = require('./components/views/Index.jsx');
var RegisterForm = require('./components/views/RegisterForm.jsx');
var Base = require('./components/Base.jsx');
var Intro = require('./components/views/Intro.jsx');
var ProductsView = require('./components/views/ProductsView.jsx');
var SuccessfullyRegistered = require('./components/views/SuccessfullyRegistered.jsx');
var Cart = require('./components/views/Cart.jsx');
var EditAccount = require('./components/views/EditAccount.jsx');
var BuyStep01 = require('./components/views/BuyStep01.jsx');
var NotFoundPage = require('./components/views/NotFoundPage.jsx');

var browserHistory = ReactRouter.browserHistory;
var hashHistory = ReactRouter.hashHistory;

var Routes = (
  <Router history={browserHistory}>
    <Route path="/" component={Base}>
      <IndexRoute component={Intro}/>
      <Route path="index" component={Index}/>
      <Route path="register" component={RegisterForm}/>
      <Route path="success" component={SuccessfullyRegistered}/>
      <Route path="product" component={ProductsView}/>
      <Route path="cart" component={Cart}/>
      <Route path="editaccount" component={EditAccount}/>
      <Route path="step01" component={BuyStep01}/>
      <Route path="*" component={NotFoundPage}/>
    </Route>
  </Router>
);

module.exports = Routes;

我的基本文件

var React = require('react');
var Footer = require('../components/footer/Footer.jsx');
var SocialNetsBox = require('../components/socialNets/SocialNetsBox.jsx');

var Base = React.createClass({
  render: function(){
    var style={
      overflowX: 'hidden'
    };
    var styleHidden={
      overflow: 'hidden'
    };
    return(
      <div className="father">
        <SocialNetsBox/>
        <div className="container-fluid" style={style}>
              {this.props.children}
        </div>
        <Footer/>
      </div>
    );
  }
});

module.exports = Base;

和我的主文件。

var React = require('react');
var ReactDOM = require('react-dom');
var Routes = require('./Routes.jsx');

ReactDOM.render(Routes, document.getElementById('main'));

问题是当我在浏览器中按F5或刷新图标时，我得到一个空白页面而控制台没有任何错误。我不知道发生了什么。我正在使用http-server

Answer 1

这似乎是RFP rabbitholing的常见情况。您只需要重置缓存包服务器比率，之后一切都应该有效。

使用React Router刷新路由不起作用

1 个答案: