无法通过react-router将props传递给组件

IT技术 javascript reactjs react-router
2021-03-25 05:52:53

我无法使用 react-router 传递props。我的代码到现在:

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就这么简单。

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

path="/edit/:id"

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

3个回答

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

脚本应该具有绝对路径:

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

或者应该指定基本 URL:

<base href="/">

这可能是您本地环境的问题,我看不出您的代码有任何问题。我在https://codesandbox.io/s/ox773ywmn9试过了,没有问题

谢谢。看起来像,但知道如何解决这个问题吗?
2021-06-05 05:52:53

我可以使用以下方法访问子组件中的props:

this.props.match.params.id
您能否更具体地说明这如何有助于回答 OP 问题?
2021-06-18 05:52:53