[英]Unable to pass props to component through react-router
I am unable to pass props using react-router. 我无法使用react-router传递道具。 My code till now: 到目前为止,我的代码:
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 错误截图
I am trying to access the id in console as simple as that. 我试图像这样简单地访问控制台中的ID 。
The error is showing only when I am trying to pass props 该错误仅在我尝试传递道具时显示
path="/edit/:id"
Source Link: https://reacttraining.com/react-router/web/api/Route/route-props 来源连结: https : //reacttraining.com/react-router/web/api/Route/route-props
This is the same problem as in this question . 这是与该问题相同的问题。 The problem is specific to the setup. 该问题是特定于安装程序的。 As shown in error message, bundle.js
is loaded from current path, /edit/bundle.js
, while it should be loaded from /bundle.js
. 如错误消息中所示, bundle.js
是从当前路径/edit/bundle.js
加载的,而应从/bundle.js
加载。
Scripts should either have absolute paths: 脚本应该具有绝对路径:
<script type="text/javascript" src="/bundle.js"></script>
Or base URL should be specified: 或应指定基本URL:
<base href="/">
It may be an issue with your local environment, I dont see anyproblem with your code. 您的本地环境可能有问题,我的代码没有任何问题。 I tried out in https://codesandbox.io/s/ox773ywmn9 and there is no issue 我在https://codesandbox.io/s/ox773ywmn9中尝试过,没有问题
我可以使用以下方式访问子组件中的道具:
this.props.match.params.id
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.