import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import {
Router,
Route,
browserHistory,
IndexRoute
} from 'react-router';
import Main from './components/Main';
import Login from './containers/Login';
import Register from './containers/Register';
import Home from './containers/Home';
import Product from './containers/Product';
import store from './store';
render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={Main}>
<IndexRoute component={Home} />
<Route path="home" component={Home} />
<Route path="login" component={Login} />
<Route path="register" component={Register} />
<Route path="products/:id" component={Product} />
</Route>
</Router>
</Provider>,
document.getElementById('app')
);
then a top bar where all the clickable <Link>s are, if I go to localhost:8000/login, I get no problem, the same goes with the register and the home and the products, in short they all render just fine. The problem starts if I go the localhost:8000/products/3 which is suppose to show details about the product with id of 3 then you go back to home and the url will become localhost:8000/products/3. From localhost:8000/products if you click login it will become localhost:8000/products/login and same goes for the other links, if you are in home and you clicked a product which will actually take you to products/:id route it would become even messier: localhost/products/products/3. But throughout all this the components are rendering just fine! what seems to be the problem?
I just figured out that it was because I and the OP used path without "/"
it should be \
and OP didn't put the code here but when redirecting, it should be \ instead of \
this Link without / is the main reason that causes this issue
I have this code
then a top bar where all the clickable
<Link>
s are, if I go tolocalhost:8000/login
, I get no problem, the same goes with theregister
and thehome
and theproducts
, in short they all render just fine. The problem starts if I go thelocalhost:8000/products/3
which is suppose to show details about the product with id of 3 then you go back tohome
and the url will becomelocalhost:8000/products/3
. Fromlocalhost:8000/products
if you clicklogin
it will becomelocalhost:8000/products/login
and same goes for the other links, if you are in home and you clicked a product which will actually take you toproducts/:id
route it would become even messier:localhost/products/products/3
. But throughout all this the components are rendering just fine! what seems to be the problem?