React-Router and Hierarchical Components

Question

I have a top level component called App:

render(
    <BrowserRouter basename="/">
        <App/>
    </BrowserRouter>
    , document.getElementById('main'));

Which has a component called MainView:

export default class App extends React.Component {
    render() {
        return (
            <div>
                <MainMenu />
                <div className="md-drawer-relative">
                    <MainView />
                </div>
            </div>
        );
    }
}

MainView sets routes to some components:

export default class MainView extends React.Component {
    render() {
        return (
            <div>
                <Switch>
                    <Route path='/settings' component={Settings} />
                    <Route path='/communications' component={Communications} />
                    <Route path='/diagnosis' component={Diagnosis} />
                </Switch>
            </div>
        );
    }
}

And I can access these components by typing in the URL in my browser. Now, I want to set more routes in one of these components, so I set some in settings:

export default class Settings extends React.Component {
    render() {
        return (
            <div>
                <Switch>
                    <Route exact path='/settings/general' component={SettingsGeneral} />
                    <Route exact path='/settings/network' component={SettingsNetwork} />
                </Switch>
            </div>
        );
    }
}

When I now want to access this URL (localhost:8080/settings/general or localhost:8080/settings/network), I get a 404.

What am I doing wrong here? I have of course checked that all components exist and can be located and the corresponding libraries are imported.

I am running it with: webpack-dev-server --mode development

----- EDIT ----

const SettingsComponent = () => {
    console.log('Subcomponent loaded!');
    return <h1>This is a subcomponent</h1>;
};

export default class Settings extends React.Component {
    render() {
        console.log(this.props.location);
        return (
            <div>
                <Switch>
                    <Route path='/settings/:settings_component' exact component={SettingsComponent} />
                </Switch>
            </div>
        );
    }
}

And I am also getting a 404 when I access the aforementioned URLs.

Answer 1

I think your issue is related to the configuration of webpack-dev-server. Try to change the

publicPath: '/'
historyApiFallback: true

Like this example:

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

The example was taken from this article: https://tylermcginnis.com/react-router-cannot-get-url-refresh/

Answer 2

Not Sure why its not working. But Can you please try with Path Params? Something like this:

 <Route exact path='/settings' component={Settings}/>
 <Route path='/settings/:category' component={SettingCategories}/>