gpt4 book ai didi

javascript - 无法通过 react 路由器将 Prop 传递给组件

转载 作者:行者123 更新时间:2023-11-30 09:19:30 25 4
gpt4 key购买 nike

我无法使用 react-router 传递 Prop 。到目前为止我的代码:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import 'normalize.css/normalize.css';
import './styles/styles.scss';

const EditExpensePage = props => {
console.log(props);

return <div>Editing the expense with id of </div>;
};

const AppRouter = () => {
return (
<BrowserRouter>
<div>
<Switch>
<Route path="/edit/:id" component={EditExpensePage} />
</Switch>
</div>
</BrowserRouter>
);
};

ReactDOM.render(<AppRouter />, document.getElementById('appDiv'));

错误截图

Error screenshot

我正尝试在控制台中访问 id 就这么简单。

错误仅在我尝试传递 props 时显示

path="/edit/:id"

来源链接:https://reacttraining.com/react-router/web/api/Route/route-props

最佳答案

这与 this question 中的问题相同.该问题特定于设置。如错误消息所示,bundle.js 是从当前路径/edit/bundle.js 加载的,而它应该从/bundle.js< 加载.

脚本应该有绝对路径:

<script type="text/javascript" src="/bundle.js"></script>

或者应该指定基本 URL:

<base href="/">

关于javascript - 无法通过 react 路由器将 Prop 传递给组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52652521/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com