javascript - JSX 元素类型 'Route' 没有任何构造或调用签名 - 路由问题

Question

Route“消息”出现错误：“JSX 元素类型'Route'没有任何构造或调用签名。”

在浏览器中：./src/app/layout/App.tsx 尝试导入错误：“react-router-dom”不包含默认导出（导入为“路由”）。

真的我不知道怎么了。

import React from "react";
import NavBar from "../../features/nav/NavBar";
import Footer from "../../features/footer/Footer";
import Route, { BrowserRouter } from "react-router-dom";
import Dashboard from "../../features/dashboard/Dashboard";
import TestApiDashboard from "../../features/testApiDashboard/TestApiDashboard";

const App = () => {
  return (
    <div>
      <div className="main">
        <NavBar />
        <Route path="/" component={Dashboard} />
        <Route path="/testApiDashboard" component={TestApiDashboard} />
        <Route path="/" component={Dashboard} />
      </div>
      <Footer />
    </div>
  );
};
export default App;

索引.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import './app/layout/styles.css';
import App from './app/layout/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

标签： javascriptreactjsreact-routerreact-router-dom

Answer 1

您需要以不同方式导入，如下所示：

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

而不是您的代码片段：

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

您可以进一步阅读<Route />。我希望这有帮助！