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.

Answers

Issue

You are importing the BrowserRouter as Route and improperly using it.

import { BrowserRouter as Route, Routes } from 'react-router-dom';

Solution

Import and router and render it higher in the ReactTree than any component that is trying to access the routing context value it provides.

Import the BrowserRouter in index.js and wrap the App component.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

Import Routes and Route in App.js. Don’t immediately invoke the handleClick function, i.e. use onClick={handleOnClick} instead of onClick={handleOnClick()}.

App.js

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

function App() {
  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;

The CreateBug component also should invoke the useState hook, i.e. useState("") instead of just useState.

const [newBugDescription, setNewBugDescription] = useState("");

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

Please signup or login to give your own answer.

Click here to cancel reply.

Im not able to route to another component – Reactjs

Answers

Issue

Solution