reactjs动态路由不起作用

Question

我是react.i的新手，我正在尝试动态路由，但无法正常工作。

我正在用react-router创建动态路由。我在名为“ / edit”的路由上创建并在其后添加了：id，以便我可以动态访问其值..但是无论何时我去http：// localhost：8080 / edit / 22它告诉我这个错误

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.

并且也不会呈现页面。 参见屏幕截图。

代码的一部分

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>
)

感谢帮助。

[] https://i.stack.imgur.com/wWOzB.png

Answer 1

发生错误是因为脚本试图根据您的路由从路径加载bundle.js 。 （ http：// localhost：8080 / edit / bundle.js ）有两种方法可以防止这种情况，具体取决于您的设置。

如果您使用html-webpack-plugin生成基本html文件，则必须提供

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

publicPath参数作为在'/' webpack.config.js 。 这将使所有输出资产都将“ /”作为根，而不是取决于路由。

如果您仅使用预制的html文件，则将脚本src更改为使用/bundle.js就足够了。 您仍然必须为导入JavaScript的其他资产提供publicPath 。

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