Question

我是反应新手。我正在尝试动态路由，但它无法正常工作。

我正在使用react-router .i在名为＆＃34; / edit＆＃34;的路由上创建动态路由。并补充说：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/

Answer 2

兄弟，只需在您的索引中添加基本标签到 html 页面，您的代码就足够了如果您想了解更多关于基本标签的信息，请参考 youtube 或 Google

reactjs无法正常工作的动态路由

2 个答案: