Terminal failed to compile using react routers (wrong syntax probably )

问题

The Terminal failed to compile. because create is not defined, I still learn using routers, it seems that the syntax or the locations wrong, I tried to understand how should I write it right in this project but there are too many details in my code already.

The goal is to show one page with a single button which open and display the form to create a room. After the user finished fill out the details (at Addroom component) and clicked on the Create button I want to display the titles with the values that the user filled at the same page (in a styled box with the selected color by the user).

If I run handleShow and handleHide, It probably not detected, is it possible to use that boolean method when the routers exist? If so how? If not, it is enough that first of all the application will work with all the algorithms but with the routers defined of course (I don't have to use the boolean functions if there is another way).

Everything of those things worked good before I used the routers in the app. I even didn't start use the routers here, I will, but I really need that the app will works first.

The description is long but it's important to me that you understand where the problem is.

I would love some help, excuse me for the mess in advance..

Here's an example of how it worked before: the project before using routers

Thanks!!

App.js

import React, { Component } from 'react'
import './App.css';
import Addroom from './components/Addroom.js';
import Room from './components/Room.js';
import {BrowserRouter as Router,Switch,Route,Link} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() { 

   this.state = {
      roomsList: [],
      isActive: false
    };

    handleShow = () => {
      this.setState({ isActive: true });
    };
  
    handleHide = () => {
      this.setState({ isActive: false });
    };
  
    create = (r) => {
      this.setState({
        roomsList: [...this.state.roomsList, {r}],
         isActive: false
      });
    };

 return (
   <div className="App">

<h1>My Smart House</h1>

<Router>

 <div className="row">

   <div className="col-6"><Link to='/room'>My Rooms</Link></div>
   <div className="col-6"><Link to='/'>Create Room</Link></div>

   <h1>My Smart House</h1>

{this.state.roomsList.map((element, key) => {
  return (
    <Room
      id={key + 1}
      key={key}
      r={element.room}
      rt={element.roomType}
      ct={element.colorType}
      sr={element.boxColor}
    />
  );
})}

{this.state.isActive ? (
  <Addroom add={this.create} />
) : (
  <button onClick={this.handleShow}>Create</button>
)}

   </div>

<Switch>

<Route exact path='/' component={()=>{return <Addroom/>}}/>
<Route exact path='/room' component={()=>{return <Room/>}}/>

</Switch>

</Router>
    

    </div>
   
 )
 }

export default App;

Addroom.js

import React, { Component } from 'react'
import App from "../App";

export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        this.state = {
            roomNameInputColor: "white",
            roomTypes: ["kitchen", "bathroom", "bedroom"],
            roomSelected: "kitchen",
            colorTypes: ["red", "green", "blue", "teal"],
            colorSelected: "red"
            
        };}

        addRoomName = e => {
            const room = e.target.value;
        
            let roomNameInputColor = "white";
            if (e.target.value.length >= 5) {
              roomNameInputColor = "green";
            } else {
              roomNameInputColor = "red";
            }
        
            this.setState({ room, addRoomName: room, roomNameInputColor });
          };
        
          createRoom = () => {
            this.props.add({
              room: this.state.room,
              roomType: this.state.roomSelected,
              colorType: this.state.colorSelected,
              boxColor: this.state.colorSelected
            });
          };
        
          createRoomType = () => {
            this.props.addRoomType(this.state.roomSelected);
          };
        
          createColorType = () => {
            this.props.addColorType(this.state.colorSelected);
          };
        
          createBoxColor = () => {
            this.props.colorTheBox(this.state.colorSelected);
          };
        
        
          setCategory = roomSel => {
            this.setState({ roomSelected: roomSel });
          };
        
          setColorCategory = colorSel => {
            this.setState({ colorSelected: colorSel });
          };
  
    render() {
        return (
            <div>

      Addroom works!!
       {/* //Select Room Type */}
       <select onChange={e => this.setCategory(e.target.value)}>
          {this.state.roomTypes.map((type, key) => (
            <option key={key} value={type}>
              {type}
            </option>
          ))}
        </select>
        <br />

        {/* //Select Room Color */}
        <select onChange={e => this.setColorCategory(e.target.value)}>
          {this.state.colorTypes.map((type, key) => (
            <option key={key} value={type}>
              {type}
            </option>
          ))}
        </select>
        <br />

        <input
          onChange={this.addRoomName}
          style={{ backgroundColor: this.state.roomNameInputColor }}
          placeholder="Name Your Room"
        />
        <br />

        <button onClick={this.createRoom}>Create</button>
       
            </div>
        )
    }
}

Room.js

import React, { Component } from "react";

export default class Room extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    const { id, r, rt, ct, sr } = this.props;
    return (
      <div className="Box" style={{backgroundColor: sr, height: "170px", width: "170px", margin: "30px"}}> 
        <h3>
          Room {id}: {r}{" "}
        </h3>
        <h3>
          Room Type {id}: {rt}
        </h3>
        <h3>
          Room Color {id}: {ct}
        </h3>
      </div>
    );
  }
}

来源：https://stackoverflow.com/questions/63056498/terminal-failed-to-compile-using-react-routers-wrong-syntax-probably