routing nested url in react-router

Question

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>

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. — James Craig
– James Craig, Commented Dec 2, 2015 at 15:38
this error occurs only in ``` products/new ```, other pages when refresh, this work fine. My server is node + express. — Jorge Roberto
– Jorge Roberto, Commented Dec 2, 2015 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... — James Craig
– James Craig, Commented Dec 2, 2015 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
– Jorge Roberto, Commented Dec 2, 2015 at 15:46

Yangshun Tay · Accepted Answer · 2015-12-30 09:01:30Z

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 (:

answered Dec 30, 2015 at 9:01

Yangshun Tay

53.7k34 gold badges126 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:02:39Z

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/

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Nov 29, 2016 at 7:50

Nah

1,7683 gold badges27 silver badges47 bronze badges

Collectives™ on Stack Overflow

routing nested url in react-router

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related