I'm using react-router-bootstrap and react-router V4, as well as Webpack for dev
My problem is that I created paths such as /services/firstService but on reload it gives a 404
I got my index.js
ReactDOM.render(
<Router>
<App />
</Router>
, document.getElementById('container'));
And then my App.jsx which is my "principal" component
export default class App extends React.Component {
render() {
return (
<div>
<Navigation/>
<div className="content">
<Route exact={true} path="/" component={Home}/>
<Route exact={true} path="/home" component={Home}/>
<Route path="/services" component={Services}/>
<Route path="/infos" component={Infos}/>
<Route path="/contacts" component={Contacts}/>
<Route path="/basic" component={BasicComponent}/>
</div>
</div>
);
}
}
The Navigation component is simply a react-router-bootstrap/react-bootstrap links
export default class Navigation extends React.Component {
render() {
return (
<Navbar>
<Nav>
<LinkContainer to="/home">
<NavItem eventKey={1}>Home</NavItem>
</LinkContainer>
<LinkContainer to="/services">
<NavItem eventKey={2}>Services</NavItem>
</LinkContainer>
<LinkContainer to="/infos">
<NavItem eventKey={3}>Infos</NavItem>
</LinkContainer>
<LinkContainer to="/contacts">
<NavItem eventKey={4}>Contacts</NavItem>
</LinkContainer>
</Nav>
</Navbar>
);
}
}
The Services component is where I want to display a component {FirstService} and change the path to /services/firstService, same for secondService
export default class Services extends React.Component {
constructor(props) {
super( props );
}
render() {
return (
<div>
ul/li
<Link to={`${this.props.match.url}/firstService`}>
firstService
</Link>
<Link to={`${this.props.match.url}/firstService`}>
firstService
</Link>
ul/li
<Route path={`${this.props.match.url}/firstService`} component={FirstService}/>
<Route path={`${this.props.match.url}/secondService`} component={SecondService}/>
</div>
);
}
}
Since it's an another component, this.props
is needed in front of match.url
(was my first problem)
But now, if I reload the page, I get the following message :
'GET localhost:8080/services/index_bundle.js 404 (Not Found)'
My webpack.config.js
/*
./webpack.config.js
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html'
})
module.exports = {
entry: './src',
output: {
path: __dirname + "/builds",
filename: 'index_bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader']}
]
},
plugins: [HtmlWebpackPluginConfig],
devServer: {
historyApiFallback: true
}
}
Change your bundle import in the index.html
file from relative path <script src="index_bundle.js"></script>
to absolute <script src="/index_bundle.js"></script>
. When you GET services
route your bundle gets loaded relatively to the url path ('/services') and lands nowhere (404 Not Found).
Make sure you set the right base tag in your index.html
: <base href="/">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With