无法通过react-router将props传递给组件 [英] Unable to pass props to component through react-router

问题描述

我无法使用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="/">

这篇关于无法通过react-router将props传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！