Im not able to route to another component

Question

App.js

import './App.css';
import CreateBug from './CreateBug';
import { BrowserRouter as Route, Routes } from 'react-router-dom';
import Button from '@mui/material/Button';
import { useNavigate } from "react-router-dom";

function App(history) {
  const navigate = useNavigate();
  const handleOnClick = () => navigate('/createBug');
  return (
    <div className="App">
      <Routes>
        <Route path="/createBug" element={<CreateBug />} />
      </Routes>
      <header className="App-header">
        <p>
          BUGHOUND
        </p>
        <Button variant="contained" onClick={handleOnClick()}>
          Create a bug
        </Button>
      </header>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

On click of that create bug button in app.js, CreateBug page should be rendered. which is the below code.

CreactBug.js

import React, { useState } from 'react';

function CreateBug() {
  const [newBugDescription, setNewBugDescription] = useState;

  return (
    <div>
      New Bug Report Entry Page
      <form>
        <label htmlFor="newBugDescription">
          New Bug Description:
        </label>
        <input
          type="text"
          id="newBugDescription"
          value={newBugDescription}
          onChange={event => setNewBugDescription(event.target.value)}
        ></input>
      </form>
    </div>
  )
}

export default CreateBug

I'm not able to route to create bug page, please help me with this. I have attached the error screenshot with this.

Answer 1

there are 3 problems in ur code
1: while using the onClick property in app.js
u wrote
onClick = {handleOnClick()}
which is incorrect, The correct method is

onClick = {handleOnClick}          just specify the name of the function 
onClick = {() => handleOnClick()}  call the function inside an arrow function

2:the second problem is
there is no () after the useState in CreateBug.js

3: The third problem is
the incorrect use of browser router u are suppsoed to wrap all ur divs where u want the routing to take place into a tag and then specify the isndie them
i will attach the correct code below

INDEX.JS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter, Route,Routes } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';
import CreateBug from './CreateBug';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <Routes>
      <Route path="/" element={<App/>} />
      <Route path="/createBug" element={<CreateBug />} />
  </Routes >
    </BrowserRouter>
    
  </React.StrictMode>
);
reportWebVitals();

APP.JS

import './App.css';
import CreateBug from './CreateBug';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
// import Button from '@mui/material/Button';
import { useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();
  const handleOnClick = () => navigate('/createBug');
  return (
    <div className="App">
      <header className="App-header">
      <p>BUGHOUND</p>
      <button variant="contained" onClick={handleOnClick}>Create a bug</button>
      </header>
    </div>
  );
}

export default App;

createbug.js remains same as given