Basic router template example - no url access

Question

I am trying to set a basic example of react router where I have two simple routes, greetings and signup, under a template setup. Currently, I am not getting any errors on load, however, when trying to access the /signup route by typing it in to the address bar, I am getting the following error: Cannot GET /signup and I am having trouble understanding why.

Did anyone else run into this issue with react-router-dom v4? I appreciate any suggestions on how to resolve this issue and allow the successful navigation to different paths via URL.

Note, if I try to access these url paths using the built in react Link component and clicking on the link, its works as expected, but when refreshing the page at the url, I get the Cannot GET signup error again.

app.js

import React from "react";
import NavigationBar from '../components/navigation-bar';

export class App extends React.Component {
    render() {
        return (
            <div className="container">
                <NavigationBar />
                {this.props.children}
            </div>
        );
    }
}

index.js

import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import {createStore} from "redux";
import allReducers from "./reducers";

import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {App} from "./components/app";
import {Greetings} from "./components/greetings";
import {Signup} from "./components/signup";


const store = createStore(allReducers);

ReactDOM.render(
                <Provider store={store}>
                    <Router>
                        <App>
                            <Switch>
                                <Route exact path="/" component={Greetings} />
                                <Route path="/signup" component={Signup} />
                            </Switch>
                        </App>
                    </Router>

                </Provider>, window.document.getElementById("app"));

greetings.js

import React from "react";

export class Greetings extends React.Component {
    render() {
        return (
            <h2>
                Greetings
            </h2>
        );
    }
}

signup.js

import React from "react";

    export class Signup extends React.Component {
        render() {
            return (
                <h2>
                    SIGN UP
                </h2>
            );
        }
    }

score 0 · Answer 1 · answered Jul 09 '17 at 15:42

0

Try using HashRouter over BrowserRouter because to use BrowserRouter web server must be ready to handle real URLs.

import {HashRouter as Router, Route, Switch} from "react-router-dom";

answered Jul 09 '17 at 15:42

Arpit Aggarwal

27,626
16
90
108

Ah, that seems to sort of work.. although, now there is `#` in the url, is there a way to avoid this? – AnchovyLegend Jul 09 '17 at 15:45
@AnchovyLegend have a look at this - https://stackoverflow.com/questions/25086832/how-to-stop-in-browser-with-react-router – Arpit Aggarwal Jul 09 '17 at 15:46
can you show an example using BrowserRouter that works without the hash? ... it doesn't seem to work by simply importing BrowserRouter and changing HashRouter to BrowserRouter... – AnchovyLegend Jul 09 '17 at 15:54

Basic router template example - no url access

1 Answers1