无法通过反应路由器将道具传递给组件

问题描述

我无法使用 react-router 传递道具.我的代码到现在:

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'react-router-dom'导入{ BrowserRouter, Route, Switch };导入'normalize.css/normalize.css'；导入'./styles/styles.scss';const EditExpensePage = props =>{控制台日志(道具)；返回<div>编辑id为</div>的费用;};const AppRouter = () =>{返回 (<浏览器路由器><div><开关><Route path="/edit/:id" component={EditExpensePage}/></开关>
</BrowserRouter>);};ReactDOM.render(, document.getElementById('appDiv'));

错误截图

我试图在控制台中访问 id 就这么简单.

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

path="/edit/:id"

源链接:https://reacttraining/react-路由器/web/api/Route/route-props

这与 这个问题.该问题特定于设置.如错误信息所示，bundle.js是从当前路径/edit/bundle.js加载的，而应该从/bundle.js<加载/代码>.

脚本应该有绝对路径:

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

或应指定基本 URL:

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'));

Error screenshot

path="/edit/:id"

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

<base href="/">