Navigating with react-router v4

Question

I am trying to build an app and learning react as the frontend framework. I recently been introduced to react-router and getting to grips with v4. I had great difficulty creating a simple app that has 3 pages - Base , Page1 and Page2 all just showing the navbar and the name of the page as a header.

I achieved this and have this working on my local server. The main page loads and when I click a link on the header I am brought to the correct page. My issue is when I manually type in the url I get a 404 response and I don't understand why.

Here is my work so far;

Main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Routes from './Routes.jsx';

ReactDOM.render((
        <BrowserRouter>
            <Routes />
        </BrowserRouter>
    ), document.getElementById('main')
);

Routes.jsx

import React from 'react';
import { Route } from 'react-router-dom';
import Pages from './components/Pages.jsx';
import Navigation from './components/Header.jsx';

const Routes = () => (
    <div>
        <Navigation />
        <Pages />
    </div>
);

export default Routes;

Header.jsx

import React from 'react';
import { NavLink } from 'react-router-dom';
import CreateReactClass from 'create-react-class';

const Navigation = () => (
  <nav>
    <ul>
      <li><NavLink to='/'>Home</NavLink></li>
      <li><NavLink to='/page1'>Page1</NavLink></li>
      <li><NavLink to='/page2'>Page2</NavLink></li>
    </ul>
  </nav>
);

export default Navigation;

Pages.jsx

import React from 'react';
import CreateReactClass from 'create-react-class';
import { Route, Switch } from 'react-router-dom';
import Base from './Base.jsx';
import Page1 from './Page1.jsx';
import Page2 from './Page2.jsx';

const Pages = () => (
    <Switch>
        <Route exact path="/" component={Base} />
        <Route exact path="/page1" component={Page1} />
        <Route exact path="/page2" component={Page2} />
    </Switch>
);

export default Pages;

Base.jsx (Page1.jsx & Page2.jsx are the same with h1 values changed)

import React from 'react';
import CreateReactClass from 'create-react-class';

const Base = CreateReactClass({
    render: function(){
        return(
            <div>
                <h1>Base</h1>
            </div>
        );
    }
});

export default Base;

package.json

{
  "name": "react-skeleton",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "watchify src/main.jsx -v -t [ babelify --presets [ react env ] ] -o public/js/main.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ddold/react-skeleton.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ddold/react-skeleton/issues"
  },
  "homepage": "https://github.com/ddold/react-skeleton#readme",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "create-react-class": "^15.6.3",
    "history": "^4.7.2",
    "http-server": "^0.11.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.2.2",
    "watchify": "^3.11.0",
    "webpack": "^4.1.1"
  }
}

I compile and run the code using the npm start command, which is taken from the start script in the packages.json file. I use http-server to run the frontend server that allows me to route between the pages

Can anyone shed any light as to why I can navigate to other pages via the navbar but not by the URL?

Answer 1

http-server does not support routes of your react application. So when you enter /page1 url, your http-server tries to open page1.html or page1/index.html file. Such file is not exists in your directory, so you receive an error.

You can create simple server, that always send index.html on any request.

Simplest implementation of your server can be:

 var http = require('http'), fs = require('fs'); fs.readFile('./index.html', function (err, html) { if (err) { throw err; } http.createServer(function(request, response) { response.writeHeader(200, {"Content-Type": "text/html"}); response.write(html); response.end(); }).listen(8000); }); 

Or, you can set up webpack dev server https://webpack.js.org/configuration/dev-server/