React SPA路由问题

Question

我有以下index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Main from './main/main';
import './index.css';

ReactDOM.render(
  <BrowserRouter><Main /></BrowserRouter>,document.getElementById('root'));

Main.js中的以下内容：

import React, { Component } from 'react';
import NavMenu from "./navmenu";
import Content from "./content";
import './main.css';

class Main extends Component {
  render() {
    return (
      <div id="main-layout">
        <div id="main-header">
          <div><img src={(require("./images/ppslogo-small.png"))} alt="eeeee"/></div>
          <div><h2>Lil Test By Me</h2></div>
        </div>
        <div id="main-content">
          <NavMenu />
          <Content />
        </div>
        <div id="main-footer">
          <div>Copyright &copy; 2020. Powered By me.  All Rights Reserved.</div>
        </div>
      </div>
    );
  }
}
export default Main;

以及content.js中的以下内容

import React, { Component } from 'react';
import {Route, Switch} from 'react-dom';

import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";

class Content extends Component {
  render() {
    return(
      <Switch>
        <Route exact path="/Dashboard" component={Dashboard} />
        <Route path="/Invoicing" component={Invoicing} />
      </Switch>
    )
  }
};
export default Content

这是我试图创建一个SPA，将Content组件作为我所有后续页面的目标；然而，我显然做错了什么，因为我到处都会收到各种错误。有没有人能立即看到我在这里做错了什么？

Answer 1

需要从react-router-dom而不是react-dom导入Route和Switch

import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';

import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";

class Content extends Component {
  render() {
    return(
      <Switch>
        <Route exact path="/Dashboard" component={Dashboard} />
        <Route path="/Invoicing" component={Invoicing} />
      </Switch>
    )
  }
};
export default Content

Answer 2

使用react-router-dom而不是react-router，然后将content.js代码更改为以下代码。

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

import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";

class Content extends Component {
  render() {
    return(
      <Router>
          <Switch>
            <Route exact path="/dashboard" component={Dashboard} />
            <Route path="/invoicing" component={Invoicing} />
          </Switch>
      </Router>
    )
  }
};
export default Content

请注意，我在交换机上方添加了Router。并将react-router更改为react-router-dom，并将路由转换为小写。