错误刷新路由器反应路由器

Question

当我点击包含url的链接时,products/new我可以访问新的产品页面,它工作正常,但是如果我刷新页面则会返回Uncaught SyntaxError: Unexpected token <.

我该如何解决这个问题？

页面产品新

import React from 'react';

class ProductNew extends React.Component {
  constructor(props) {
    super(props);
  }
  render(){
    return (
      <div>
        <div><h1>ProductNew</h1></div>
      </div>
    );
  }
}

module.exports = ProductNew;

页面产品

import React from 'react';
import { Link }  from 'react-router';

class Products extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <div><h1>Products</h1></div>
        <Link to="/products/new">new</Link>
      </div>
    );
  }
}

module.exports = Products;

页面应用程序

render((
  <Router history={createBrowserHistory()}>
    <Route path="/" component={Layout}>
       <IndexRoute component={Home} />
       <Route path="/products" component={Products}/>
       <Route path="/products/new" component={ProductNew}/>
    </Route>
  </Router>
), document.getElementById('app'));

Answer 1

我有类似的问题，我的 App.js 路径是相对的。因此，当我从主路径加载应用程序页面时，一切正常，但是当我尝试从像您的“/product/new”这样的链接加载时，我收到了像您一样的错误。当我设置绝对路径时，效果很好。

我使用 webpack 来捆绑文件和 webpack-dev-server 来运行开发环境，当你使用 webpack-dev-server 热加载器（默认情况下）时，没有物理文件，这是很容易陷入的事情。

编辑： 这个人的问题有两个更新，与你有同样的问题，并且有比我给你的更好的答案/信息。