2

I have my routes difined, and when i navigate to products/new, works fine, but if refresh page, he products/new not enter, he returns unexpected token.

Route Config.

<Router history={createBrowserHistory()}>

<Route path="/" component={Layout}>
   <IndexRoute component={Home} />
   <Route path="produtos/novo" component={ProductsNew}/>
   <Route path="produtos" component={Products} />
</Route>

Jorge Roberto
  • 157
  • 2
  • 12
  • You will need to set up .htaccess or Virtual Host (if you're using Apache) to point all requests to the index page where your app is sitting. – Enijar Dec 02 '15 at 15:38
  • this error occurs only in ``` products/new ```, other pages when refresh, this work fine. My server is node + express. – Jorge Roberto Dec 02 '15 at 15:43
  • You do not have a route set up for `products/new` in the code you have provided. That is probably the reason, although I'd need more information to help you... – Enijar Dec 02 '15 at 15:45
  • this is my server: `const express = require('express') const path = require('path') const port = process.env.PORT || 8000 const app = express() // serve static assets normally app.use(express.static(__dirname + '/public')) // handle every other route with index.html, which will contain // a script tag to your application's JavaScript file(s). app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, 'public', 'index.html')) }) app.listen(port) console.log("server started on port " + port)` – Jorge Roberto Dec 02 '15 at 15:46
  • What happens when you navigate to `produtos/novo`? – Enijar Dec 02 '15 at 15:52
  • when i navigate, clicking in link by react, works fine. the problem ocurrs if refresh page, in this specific route. – Jorge Roberto Dec 02 '15 at 15:52
  • Also in your example, you have specified the route as `produtos` and you refer to it as `products`. Is this a typo? – Enijar Dec 02 '15 at 15:54
  • sorry, products = produtos. – Jorge Roberto Dec 02 '15 at 15:55

2 Answers2

3

I ran into a similar problem and eventually realized it wasn't an issue with React Router but my own paths. It was loading files relative to /produtos rather than / (relating to your example).

I added <base href="/" /> into the <head> of my index.html and it worked (:

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
2

The similar question has been asked: Correct path for img on React.js

Hopefully this will help. The key is that you use relative path from the root i.e.'/dir/assets/xxx.xx' the first starting / starts URL path form root dir.

This will be same when you work locally i.e. http://localhost:8080/ or even on your web i.e. http://www.yourdomain.com/

Community
  • 1
  • 1
Nah
  • 1,690
  • 2
  • 26
  • 46