CODEWITHSUNDEEP
reactjsreact-router
Felipe Deitos
Felipe Deitos

Reputation: 194

React routes not working properly

I think i got a problem using a very basic react router implementation. When i load my "localhost:8080/dist/", it WORKS, load the header component that is being imported on App, and load the IndexRoute properly, but when i try to access "localhost:8080/dist/FPDV0200" or "localhost:8080/dist/FPDV0400" it dosnt work. Any clues?

app.component.tsx

import * as React from 'react';

import Header from '../header/header.component';

class App extends React.Component<any, any> {
    render() {
        return (
            <div id="app">
                <Header />
                <div>
                    {this.props.children}
                </div>
            </div>
        );
    }
}

export default App;

app.component.tsx

import * as React from 'react';
import { Router, hashHistory, Route, IndexRoute } from 'react-router';

import App from '../components/structure/app/app.component';
import Home from '../pages/home/home';
import FPDV0200 from '../pages/FPDV0200/FPDV0200';
import FPDV0400 from '../pages/FPDV0400/FPDV0400';

const routes = (
<Router history={hashHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Home}/>
        <Route path="FPDV0200" component={FPDV0200}/>
        <Route path="FPDV0400" component={FPDV0400}/>
    </Route>
</Router>
);

export default routes;

Upvotes: 0

Views: 1287

Answers (1)

degr
degr

Reputation: 1565

localhost:8080/dist/FPDV0200 - this url should work in case of usage browserHistory.

You use hashHistory, so your url should look like this

localhost:8080/dist#FPDV0200

Upvotes: 1

Related Questions