Routing not working in a react app with webpack

Asked
Active3 hr before
Viewed126 times

9 Answers

routingwebpackworkingreact
90%

I am running webpack dev server on localhost:8080, and it serves the first route with no problem, however when I go to localhost:8080/test, I am getting a Cannot GET /test . ,Making statements based on opinion; back them up with references or personal experience., Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Shall I submit sitemap containing all the bad (now 404) urls after the spam url hack?

The docs mention how this works. You need to add this to your module.exports object:

devServer: {
   historyApiFallback: true
}
load more v
88%

We built the route based on react-router in React, and tried to move away from react-admin. I had this issue which the route /loading worked fine but not the /loading/test . There were issues with the nested route.,I saw this in the network tab. The request url should be http://localhost:3000/main.bundle.js , but the request url changed when route was nested route /loading/test,This was a real pain but I found out a solution and it worked like a charm,The next challenge would be for the production and hopefully it will work the same.

We built the route based on react-router in React, and tried to move away from react-admin. I had this issue which the route /loading worked fine but not the /loading/test . There were issues with the nested route.

<PrivateRoute exact path="/loading" component={Loading} /><PrivateRoute exact path="/loading/test" component={Loading} />
load more v
72%

If you happen to have a custom Webpack setup, you may be wondering how to set up React Router with Webpack. Let's say we have the following minimal React application using React Router:,Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.,Just recently I had to use Docker for my React web application development. Here I want to give you a brief walkthrough on how to achieve it. First of all, we need a React application. Either create a…,The previous tutorials have shown you how to set up a basic web application with Webpack 5. So far, Webpack is only used to bundle all your JavaScript files, to transpile new JavaScript features via…

If you happen to have a custom Webpack setup, you may be wondering how to set up React Router with Webpack. Let's say we have the following minimal React application using React Router:

import React from 'react';import {  BrowserRouter as Router,  Route,  Link,} from 'react-router-dom'; const Home = () => <div>Home</div>; const About = () => <div>About</div>; const App = () => (  <Router>    <Link to="/">Home</Link>    <Link to="/about">About</Link>     <Route exact path="/" component={Home} />    <Route path="/about" component={About} />  </Router>); export default App;
import React from 'react';import {  BrowserRouter as Router,  Route,  Link,} from 'react-router-dom'; const Home = () => <div>Home</div>; const About = () => <div>About</div>; const App = () => (  <Router>    <Link to="/">Home</Link>    <Link to="/about">About</Link>     <Route exact path="/" component={Home} />    <Route path="/about" component={About} />  </Router>); export default App;

If you open your React application and navigate between both paths, everything should be fine. However, if you navigate via the browser's URL bar to /about, you will get something like Cannot GET /about. That's because Webpack doesn't know what to serve on this path, because Webpack only knows about the root path / for your application. In order to serve your React application on every path, you need to tell Webpack and its configuration that it should fallback for every path to your entry point:

...module.exports = {
   ...devServer: {
      historyApiFallback: true,
   },
};
...module.exports = {
   ...devServer: {
      historyApiFallback: true,
   },
};
load more v
65%

To replicate the problem, you'll build and deploy a simple React app with two pages. First, create your React development environment with Create React App by entering the following command in your terminal.,In your case render.com has a simple solution for that. On the dashboard for your app, click the Redirects/Rewrites tab and add the following:,Now save the changes and deploy your app again just to be sure. Your routes should work perfectly now.,Create a Routes.js file and add the following to create the home and about page routes.

1n px create - react - app[YOUR_APP_NAME]
load more v
75%

Note: This package provides the core routing functionality for React Router, but you might not want to install it directly. If you are writing an application that will run in the browser, you should instead install react-router-dom. Similarly, if you are writing a React Native application, you should instead install react-router-native. Both of those will install react-router as a dependency.,Gitgithub.com/ReactTraining/react-router,github.com/ReactTraining/react-router#readme,Declarative routing for React.

Using npm:

$ npm install--save react - router
// using ES6 modules
import {
   Router,
   Route,
   Switch
} from "react-router";

// using CommonJS modules
var Router = require("react-router").Router;
var Route = require("react-router").Route;
var Switch = require("react-router").Switch;
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
load more v
40%

Convinced that you must’ve done something wrong, you spin up your app in your local dev environment and try to replicate the bug. But the routing is perfectly fine locally. It even works for the production version: npm run build and serve -s build. So what’s the problem here?,For the prod version which is served when you npm run build and serve -s build, we turn to webpack.config.js. Here, we have the Navigate Fallback option set to paths.publicUrlOrPath + 'index.html':,Solution with hash routing,But have you ever tried serving your app with Python’s http.server? It requires an index.html file so we can run it in your prod build folder:

$ cd / build
$ python3 - m http.server
load more v
22%

This section is for everyone who ran into this problem in development using webpack-dev-server.. Just as above, what we need to do it tell Webpack Dev Server to redirect all server requests to /index.html. There are just two properties in your webpack config you need to set to do this, publicPath and historyApiFallback.,First, let’s establish the problem you’re having. To do that, we’ll need to talk about how the browser and client-side routers work.,I pinky promise you'll love it, but here's a recent issue so you can decide for yourself.,Delivered to over 80,000 developers every Monday

app.get('/*', function(req, res) {
   res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
      if (err) {
         res.status(500).send(err)
      }
   })
})
load more v
60%

Get the latest tutorials on SysAdmin and open source topics. , Tutorials , Tutorials , Tutorials

In your terminal, use npm to install the package:

npm install react - router - dom
load more v
48%

Most React apps will have their files “bundled” using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.,If you’re using Create React App, Next.js, Gatsby, or a similar tool, you will have a Webpack setup out of the box to bundle your app.,To avoid winding up with a large bundle, it’s good to get ahead of the problem and start “splitting” your bundle. Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.,If you aren’t, you’ll need to set up bundling yourself. For example, see the Installation and Getting Started guides on the Webpack docs.

load more v

Other "routing-webpack" queries related to "Routing not working in a react app with webpack"