React-Routing basic example path not working

Question

Triyng for run basic example from here

I've got Yarn+Webpack2+Babel es2015

This is my entry point:

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

     const BasicExample = () => (
        <Router>
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                </ul>

                <hr/>

                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
            </div>
        </Router>
    );

    const Home = () => (
        <div>
            <h2>Home</h2>
        </div>
    );

    const About = () => (
        <div>
            <h2>About</h2>
        </div>
    );

    ReactDOM.render(
        <BasicExample/>,
        document.getElementById('root')
    );

Project at http://localhost:8080 starting good and Links working fine, rendering content from Home and About components.

But when I'm trying to enter url http://localhost:8080/about - console showing me

GET http://localhost:8080/about 404 (Not Found)

I found many almost same questions on Stack, but not found solution working for me.
What exactly in react-router intercept incoming url?
It possible that this not working because of mine Yarn\Webpack settings?

____________UPDATE_1 Webpack config

const path = require('path');
let webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: path.join(__dirname, 'index.html'),
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    /*devServer: {
        host: "DESKTOP-A5FTMD8", // Can change port
        port: 8080
    },*/
    entry: path.join(__dirname, 'index.jsx'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        loaders: [
            {test: /\.(less|css)$/, loader: 'style-loader!css-loader!less-loader'},
            {test: /\.(xml)$/, loader: 'xml-loader'},
            {test: /\.(svg|png|jpg|jpeg)$/, loader: 'file-loader'},
            {
                test: /\.(js|jsx|es6)$/,
                exclude: /node_modules/,
                loader: 'react-hot-loader!babel-loader?presets[]=react,presets[]=es2015'
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.es6']
    },
    plugins: [
        HtmlWebpackPluginConfig
    ]
};

It looks like a problem of your `webpack-dev-server` configuration. — Andrea Carraro, May 18 '17 at 11:56
Did you `npm install react-router-dom` / `yarn add react-router-dom`? Also check out my basic example here: http://stackoverflow.com/documentation/react-router/5546/getting-started-with-react-router/30504/getting-started#t=201705181158028254636 — Sventies, May 18 '17 at 11:57
@SventenHaaf, create from start app by your example. Result is the same. Possibly **toomuchdesign** right about my webpack configuration. — ANTVirGEO, May 18 '17 at 14:24
I guess so. I'm sorry I can't help you right now, but please let me know if you found a solution. — Sventies, May 18 '17 at 14:30
@SventenHaaf, got it. http://stackoverflow.com/questions/35027260/nested-url-routing-using-react-router-and-webpack-dev-server — ANTVirGEO, May 18 '17 at 16:08

score 0 · Accepted Answer · edited May 23 '17 at 11:54

0

The problem solved by this solution in webpack config:

devServer: {
    historyApiFallback: true <-- this needs to be set to true
}

This answer

edited May 23 '17 at 11:54

Community

1
1

answered May 18 '17 at 14:33

ANTVirGEO

124
1
16

React-Routing basic example path not working

1 Answers1