This is the code of my webpack configuration:
const compiler = webpack({
entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')],
module: {
loaders: [
{
exclude: /node_modules/,
test: /\.js$/,
loader: 'babel',
},
],
},
output: {filename: 'app.js', path: '/'},
});
const app = new WebpackDevServer(compiler, {
contentBase: '/public/',
proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
publicPath: '/js/',
stats: {colors: true},
});
app.use('/', express.static(path.resolve(__dirname, 'public')));
Works fine, the app runs on localhost:3000/index.html but when I try to implement React Router dom v4. It doesn't work. This is the code:
const About = () => <div> <h1>About</h1> </div>
ReactDOM.render(
<BrowserRouter>
<div>
<Route exact path='/' component={App}/>
<Route path='/about' component={About}/>
</div>
</BrowserRouter>,
mountNode
);
This is the result on localhost:3000/ And on localhost:3000/about. I get an error: Cannot GET /about . Not what I'm expecting, why would this not render?
React Router is a standard library for routing in React. It enables navigation between views from different components in a React application, allows the browser URL to be changed, and keeps the UI in sync with the URL.
The 'react-router' library is now split into three separate packages. react-router-dom: Designed for web applications. react-router-native: Designed for mobile applications. react-router-core: Can be used anywhere for core applications.
To install React Router, all you have to do is run npm install react-router-dom@6 in your project terminal and then wait for the installation to complete. If you are using yarn then use this command: yarn add react-router-dom@6 .
I do not think it has anything to do with webpack-config. Here is a basic github repository using react-router-4.0. I have created this example without any specific changes related to react-router-4.0 in webpack config.
Add 'devServer' in your webpack config if not already:
devServer: {
historyApiFallback: true,
}
Two small suggestions in your code, try using 'exact' with the path for 'about' i.e.
<Route exact path='/about' component={About}/>
and, add parenthesis for const about i.e.,
const About = () => (<div> <h1>About</h1> </div>);
Hope, this solves your query. Let me know if you require any other information on this.
In my case I had to remove proxy config, because the webpack server wanted a response from http://localhost:3001.
// proxy: {
// '/': 'http://localhost:3001',
// },
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