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

【问题标题】：Unable to pass props to component through react-router无法通过 react-router 将 props 传递给组件
【发布时间】：2019-03-10 04:31:05
【问题描述】：

我无法使用 react-router 传递道具。到目前为止我的代码：

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

只有在我尝试传递道具时才会显示错误

path="/edit/:id"

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

【问题讨论】：

看你需要什么道具。如果 id 适合您的案例，您可以使用 params reacttraining.com/react-router/web/api/match。要传递额外的道具，请使用 render 而不是 component reacttraining.com/react-router/web/api/Route/render-func
@TalgatSaribayev 我现在正在尝试在控制台中获取以下值：{props.match.params.id}

标签： javascript reactjs react-router

【解决方案1】：

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

脚本应该有绝对路径：

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

或应指定基本 URL：

<base href="/">

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢。看起来像，但知道如何解决这个问题吗？

【解决方案3】：

我可以使用以下方法访问子组件中的道具：

this.props.match.params.id

【讨论】：

您能否更具体地说明这如何有助于回答 OP 的问题？