你做错了几件事。

1. 首先，browserHistory 不是 V4 中的东西，因此您可以将其删除。

2. 其次，您要从 导入所有内容react-router，它应该是react-router-dom.

3. 第三，react-router-dom不导出 a Router，而是导出 aBrowserRouter所以您需要import { BrowserRouter as Router } from 'react-router-dom.

看起来您刚刚使用了 V3 应用程序并希望它能够与 v4 一起使用，这不是一个好主意。

代替

import { Router, Route, Link, browserHistory } from 'react-router';

和

import { BrowserRouter as Router, Route } from 'react-router-dom';

它将开始工作。这是因为 react-router-dom 导出 BrowserRouter

我已经尝试了这里建议的所有内容，但对我不起作用。因此，如果我可以帮助遇到类似问题的任何人，我检查过的每个教程都不会更新为适用于版本 4。

这是我为使其工作所做的工作

import React from 'react';
import App from './App';

import ReactDOM from 'react-dom';
import {
    HashRouter,
    Route
} from 'react-router-dom';


 ReactDOM.render((
        <HashRouter>
            <div>
                <Route path="/" render={()=><App items={temasArray}/>}/>
            </div>
        </HashRouter >
    ), document.getElementById('root'));

这是我设法使其正常工作而没有任何错误或警告的唯一方法。

如果您想为我将props传递给您的组件，最简单的方法是：

 <Route path="/" render={()=><App items={temasArray}/>}/>

来自 useLocation 钩子或来自 useHistory 钩子的位置正在引用来自 react-router-dom 的 BrowserRouter

所以只从子组件调用 useLocation 和 useHistory 这样下面的代码就可以工作

#src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter,Switch, Route, } from "react-router-dom";

ReactDOM.render(
  <>
    <BrowserRouter>
      <Switch>
        <Route>
           <App />
        <Route>
      </Switch>   
    </BrowserRouter>
      </>,
      document.getElementById("root")
    );

然后在您的 App.js 中，您可以通过 useLocation 挂钩或 useHistory 获取位置

因为它是 BrowserRouter 的子节点，所以它会被定义

例如。const { location} = useHistory(); 例如。const loction = useLocation();

所以如果你需要使用这个代码）

import { useRoutes } from "./routes";

import { BrowserRouter as Router } from "react-router-dom";

export const App = () => {

const routes = useRoutes(true);

  return (

    <Router>

      <div className="container">{routes}</div>

    </Router>

  );

};

// ./routes.js 

import { Switch, Route, Redirect } from "react-router-dom";

export const useRoutes = (isAuthenticated) => {
  if (isAuthenticated) {
    return (
      <Switch>
        <Route path="/links" exact>
          <LinksPage />
        </Route>
        <Route path="/create" exact>
          <CreatePage />
        </Route>
        <Route path="/detail/:id">
          <DetailPage />
        </Route>
        <Redirect path="/create" />
      </Switch>
    );
  }
  return (
    <Switch>
      <Route path={"/"} exact>
        <AuthPage />
      </Route>
      <Redirect path={"/"} />
    </Switch>
  );
};