无法通过react-router将props传递给组件
我无法使用react-router传递道具。我的代码到现在为止:
I am unable to pass props using 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'));
错误截图
我正在尝试访问控制台中的 id ,就像那个。
I am trying to access the id in console as simple as that.
错误仅在我尝试传递道具时显示
The error is showing only when I am trying to pass props
path="/edit/:id"
来源链接: https://reacttraining.com/react-router/web/api/Route/ route-props
这与这个问题。问题是特定于设置。如错误消息所示, bundle.js
从当前路径 /edit/bundle.js
加载,而它应该从 /bundle.js
加载。
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
.
脚本应该具有绝对路径:
Scripts should either have absolute paths:
<script type="text/javascript" src="/bundle.js"></script>
或者应该指定基本网址:
Or base URL should be specified:
<base href="/">