React router params and querys is not working

Question

From last couple of days i was finding a solution for this problem.what is happening here is i want dynamic link.you can see below here:

<Route path="/edit/:username" component={EditExpensePage} />

But when I go to /edit/12 , I'm getting this error:

GET http://127.0.0.1:8080/edit/bundle.js net::ERR_ABORTED

Here is my code:

import React from 'react';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import ExpenseDashboardPage from '../components/ExpenseDashboardPage';
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 />

        <Route path="/" component={ExpenseDashboardPage} exact={true} />
        <Route path="/create" component={AddExpensePage} />
        <Route path="/edit/:username" component={EditExpensePage} />
        <Route path="/help" component={HelpPage} />

    </div>
  </BrowserRouter>
);

export default AppRouter;

Answer 1

It looks like you're loading your bundle.js file with a relative URL.

So when you load the page http://127.0.0.1/Home (or whatever) it resolves as http://127.0.0.1/bundle.js , which is correct.

However when you load the page http://127.0.0.1/edit/12 it resolves as http://127.0.0.1/edit/bundle.js , which is incorrect.

Make the <script tag use an absolute URL.