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并将其作为我以后所有页面的目标；但是，很明显我做错了，因为到处都是各种各样的错误。任何人都可以在这里立即看到我的错误操作吗？

Answer 1

import {Route, Switch} from 'react-dom';应该import {Route, Switch} from 'react-router-dom';

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

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