reactjs / react-router-tutorial

5.52k stars 1.75k forks source link

Problems with routing #267

Open aprilmintacpineda opened 7 years ago

aprilmintacpineda commented 7 years ago

I have this code

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?

sdymj84 commented 5 years ago

I have the same problem here. Can anyone tell me what's wrong?

sdymj84 commented 5 years ago

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