reactjs动态路由不起作用

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.stack.imgur.com/wWOzB.png

Answer 1

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/