dynamic routing with reactjs not working

Question

i am new to react.i was trying dynamic routing but it is not working .

i was creating dynamic routing with react-router .i created on route named "/edit" and added that :id after it so i can dynamically access its value ..but whenever i go to http://localhost:8080/edit/22 it shows me this error

GET http://localhost:8080/edit/bundle.js net::ERR_ABORTED
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.

and also doesn't render the page. see the screenshot.

part of code

const EditExpenseDashboardPage = (props) => {
    console.log(props)
    return (
    <div>
        <h3>EditExpense Dashboard page</h3>
        <Link to="/add">Add</Link>
        <Link to="/help">help</Link>
    </div>
)}

const routes = (
    <BrowserRouter>
        <div>
            <Header/>
            <Switch>
                <Route path="/" component={ExpenseDashboardPage} exact={true} />
                <Route path="/add" component={AddExpenseDashboardPage} />
                <Route path="/edit/:id" component={EditExpenseDashboardPage} />
                <Route path="/help" component={HelpExpenseDashboardPage} />
                <Route component={ErrorWala} />
            </Switch>
        </div>
    </BrowserRouter>
)

thanks for help.

[]https://i.sstatic.net/wWOzB.png

It's an issue with your index.html page script src. Notice the url it is trying to load your JS from ( localhost:8080/edit/bundle.js). /edit isn't a directory that exists in your project. Instead, it should be ( localhost:8080/bundle.js). Change you script src in index.html to src="./bundle.js" — Chase DeAnda
– Chase DeAnda, Commented Mar 29, 2018 at 17:41

Agney · Accepted Answer · 2018-03-30 09:12:04Z

4

The error occurs because the script is trying to load bundle.js from a path based on your route. (http://localhost:8080/edit/bundle.js) There are two ways to go about preventing this depending on your setup.

If you are using html-webpack-plugin to generate the base html file, then you have to provide

output: {
  filename: "[hash].bundle.js",
  path: commonPaths.outputPath,
  publicPath: "/"  // Notice this line 
},

publicPath parameter as '/' in webpack.config.js. This will make all output assets refer to '/' as the root instead of depending on the route.

If you are just using a pre made html file, changing the script src to use /bundle.js will suffice. You still have to provide the publicPath for other assets imported into javascript.

https://webpack.js.org/guides/public-path/

edited Mar 30, 2018 at 9:12

answered Mar 29, 2018 at 17:49

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rahul Sawant Over a year ago

thank you .it worked. but i ./bundle.js didn't work.so i removed that and put /bundle.js then it worked .thanks for good information

greeneley Over a year ago

Thank you so much. Adding publicPath helped me to resolve this problem :D

Collectives™ on Stack Overflow

dynamic routing with reactjs not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related