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!

Rohan Mahajan · Accepted Answer · 2018-08-15 11:55:41Z

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:

Setup the property public path as publicPath: '/'in your webpack.config.js in output block and devserver block.
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.
Deleted Node Modules.
Clear npm cache using npm cache clean --force
Delete Public Folder and reinstalled node modules and created a fresh public folder to serve index.html and bundle.js
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
    }

};

mani.saffarnia · Accepted Answer · 2018-06-15 07:23:34Z

0

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.

edited Jun 15, 2018 at 7:23

answered Jun 15, 2018 at 6:00

mani.saffarnia

91 silver badge3 bronze badges

Comments

CMarker · Accepted Answer · 2018-09-21 12:34:59Z

0

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

edited Sep 21, 2018 at 12:34

answered Sep 21, 2018 at 12:02

CMarker

751 silver badge9 bronze badges

Collectives™ on Stack Overflow

React router: adding dynamic URL

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related