Error refresh router react router

Question

When I click on the link that contains url products/new I can access the new product page and it works fine, but if I refresh the page it returns Uncaught SyntaxError: Unexpected token <.

How can I resolve this?

Page product new

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;

page products

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;

Page App

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

I had a similar problem, my App.js path were relative. So when I loaded the app page from home path everything worked well, but when I tried to load from a link like yours "/product/new", I received an error like yours. When I put an absolute path, it worked fine.

I was using webpack to bundle the file and webpack-dev-server to run the development env and there is no physical files when you use webpack-dev-server hot loader (by default), it's a thing there is easy to fall in.

---

Edit: this guy's question has 2 updates on it, with the same problem as you and has a better answer/info than that I gave to you.