当我尝试更改 React js 中的功能组件中的类组件时遇到问题

Question

app.js

我要转换的文件代码:

import Toolbar from "./components/Toolbar";
// import Iqac from "./components/Iqac/iqac";
import React from "react";
import "./styles.css";
import SideDrawer from "./components/sidemenu/SideDrawer";
import BackDrop from "./components/backdrop/BackDrop";
import { Route, Router, Routes } from "react-router-dom";

class App extends React.Component {
  state = {
  };

  drawerToggleClickHandler = () => {
    this.setState(prevState => {
      return { sideDrawerOpen: !prevState.sideDrawerOpen };
    });
  };
  backDropClickHandler = () => {
    this.setState({ sideDrawerOpen: false });
  };

  render() {
    // let sideDrawer;
    let backdrop;

    if (this.state.sideDrawerOpen) {
      // sideDrawer = <SideDrawer />;
      backdrop = <BackDrop click={this.backDropClickHandler} />;
    }
    return (<>
             
      <div className="tool">
        <Toolbar drawerToggleClickHandler={this.drawerToggleClickHandler} />
        <SideDrawer show={this.state.sideDrawerOpen} />
        {backdrop}
      </div>
      </>
    );
  }
}

export default App;

我也尝试改变，我想实现react router dom v6，所以这就是为什么需要这样做，但我不知道如何在基于react-class的组件中执行此操作。

import Toolbar from './components/Toolbar'
import Footer from './components/Footer'
import Home from './Pages/Home'
import { useState } from "react";
import About from "./Pages/About"
import {
  BrowserRouter as Router,
  Route,
  Routes
} from "react-router-dom";
const App = () => {

  const [state, setstate] = useState({
    sideDrawerOpen: false
  });

  return (
    <>
    
      <Router>
      <Toolbar />
        <Routes>
          <Route path='/' element={<Home />}> </Route>
          <Route path='/about/*' element={<About />}> </Route>
        </Routes>

      </Router>
      <Footer />
    </>
  );
}

export default App;

我想使用 React router dom，我认为 v6 不适用于类组件

请帮助我解决这个问题，我需要您的大力支持，非常感谢您的帮助

Answer 1

尝试像这样更改你的代码：

import Toolbar from './components/Toolbar';
import Footer from './components/Footer';
import Home from './Pages/Home';
import { useState } from 'react';
import About from './Pages/About';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const App = () => {
  const [sideDrawerOpen, setSideDrawerOpen] = useState(false);

  const drawerToggleClickHandler = () => {
    setSideDrawerOpen((prevState) => !prevState);
  };

  const backDropClickHandler = () => {
    setSideDrawerOpen(false);
  };

  return (
    <div className='tool'>
      <Toolbar drawerToggleClickHandler={drawerToggleClickHandler} />
      <SideDrawer show={sideDrawerOpen} />
      {sideDrawerOpen && <BackDrop click={backDropClickHandler} />}
      <Router>
        <Toolbar />
        <Routes>
          <Route path='/' element={<Home />}>
            {' '}
          </Route>
          <Route path='/about/*' element={<About />}>
            {' '}
          </Route>
        </Routes>
      </Router>
      <Footer />
    </div>
  );
};

export default App;