从它导入普通路由器时 react-router-dom 出现问题

Question

我需要为我创建此文件创建自定义历史记录

import createHistory from "history/createBrowserHistory";

export default createHistory();

并将其导入我的 App.js 文件中，如下所示：

import React from "react";
import { Router, Route } from "react-router-dom";

import StreamList from "./streams/streamList";
import StreamCreate from "./streams/streamCreate";
import StreamDelete from "./streams/streamDelete";
import StreamEdit from "./streams/streamEdit";
import StreamShow from "./streams/streamShow";
import Header from "./header";
import history from "../history";

function App() {
  return (
    <div className="ui container">
      <Router hitory={history}>
        <Header />
        <Route path="/" exact component={StreamList} />
        <Route path="/streams/new" component={StreamCreate} />
        <Route path="/streams/edit" component={StreamEdit} />
        <Route path="/streams/delete" component={StreamDelete} />
        <Route path="/streams/show" component={StreamShow} />
      </Router>

并收到此错误：

TypeError: 无法读取未定义的新路由器 E:/xord/streams/modules/Router.js:20 17 | 的属性“位置”超级（道具）； 18 | 19 | this.state = { > 20 |位置：props.history.location

Answer 1

问题很可能是<Router /> 和<Route /> 组件之间缺少<Switch /> 组件。从<Switch />的文档看：

呈现与位置匹配的第一个子 <Route> 或 <Redirect>。

尝试添加如下：

<Router hitory={history}>
    <Header />
    <Switch>
        <Route path="/" exact component={StreamList} />
        <Route path="/streams/new" component={StreamCreate} />
        <Route path="/streams/edit" component={StreamEdit} />
        <Route path="/streams/delete" component={StreamDelete} />
        <Route path="/streams/show" component={StreamShow} />
    </Switch>
</Router>