Reputation: 6764
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.
Upvotes: 2
Views: 664
Reputation: 1072
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/
Upvotes: 1
Reputation: 851
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}/>
Upvotes: 0