React router: adding dynamic URL

Question

I am using React Router Dom 4.2.2

Currently I have one Router as follows:

import React from 'react';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
import ExpensesDashboardPage from "../components/ExpensesDashboardPage";
import AddExpensePage from "../components/AddExpensePage";
import EditExpensePage from "../components/EditExpensePage";
import HelpPage from "../components/HelpPage";
import NotFoundPage from "../components/NotFoundPage";
import Header from "../components/Header";

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header/>
            <Switch>
                <Route path='/' component={ExpensesDashboardPage} exact={true}/>
                <Route path='/create' component={AddExpensePage}/>
                <Route path='/edit/' component={EditExpensePage}/>
                <Route path='/help' component={HelpPage}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </div>
    </BrowserRouter>
);
export default AppRouter;

And I have tested that we can navigate to each one of the Route.

Then I thought about using a dynamic URL as follows:

 <Route path='/edit/:id' component={EditExpensePage}/>

So then the component which we should render is:

import React from 'react';

const EditExpensePage = (props) => {
    console.log(props);
    return (
        <div>
            This is the Edit Expenses page, enjoy!
        </div>
    );
};
export default EditExpensePage;

The question here is the following:

Why if we go to the following URL: http://localhost:8080/edit/33 , the console outputs:

GET http://localhost:8080/edit/bundle.js 404 (Not Found)
33:1 Refused to execute script from 'http://localhost:8080/edit/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I would expect to see the page being loaded and into the match props, a params Object with the id: 33

I have also read

How to achieve Dynamic routing in React Router 4?

Thank you for your help!

Answer 1

I also had the same issue. My best bet you are watching the React Udemy tutorial of Andrew Mead. I tried the solution as provided by @mani.saffarnia. Didn't Work Out. Here is how I got to make it work:

1. Setup the property public path as publicPath: '/' in your webpack.config.js in output block and devserver block.
2. Also change the default webpack server port from 8080 to 8082(any random unused port) in webpack dev server to ensure there is no caching.
3. Deleted Node Modules.
4. Clear npm cache using npm cache clean --force
5. Delete Public Folder and reinstalled node modules and created a fresh public folder to serve index.html and bundle.js
6. Finally run dev server for a working output

Here's my final webpack config for the fixed issue.

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output:{
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    module:{
        rules:[
            {
                loader:'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test:/\.s?css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    devtool:'inline-source-map',
    devServer:{
        contentBase : path.resolve(__dirname, 'public'),
        historyApiFallback: true,
        publicPath: '/',
        port: 8082
    }   

};

Answer 2

You didn't do anything wrong in your code. I know the tutorial that you are watching and I had the same problem. I just deleted my "public" and "node_modules" folders. after that, I created a new public folder(with a new index.html inside it), and also used "npm install" to install all dependencies and create node_modules again. It worked for me and I hope it works for you too.

Answer 3

In your index.html file.

does your script import say:

<script src="./bundle.js"></script>

if so. remove the "." in from of the "/". So the script import is

<script src="/bundle.js"></script>

This worked for me