I'm not able to route to another page

Question

import './App.css';
import CreateBug from './CreateBug';
import { BrowserRouter as Router,Route,Routes } from 'react-router-dom';
import Button from '@mui/material/Button';
function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/createBug" element={<CreateBug/>}/>
      <header className="App-header">
        <p>
          BUGHOUND
        </p>
           <Button variant="contained" >Create a bug</Button>
      </header>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

I got this error :

Uncaught Error: [header] is not a <Route>

I am not able to route to next page/component. path has to be changed as well.

score 0 · Answer 1 · answered Mar 04 '23 at 18:13

0

Your header element should not be a child of Router. Try this:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          BUGHOUND
        </p>
        <Button variant="contained" >Create a bug</Button>
      </header>
      <Router>
        <Routes>
          <Route path="/createBug" element={<CreateBug/>}/>
        </Routes>
      </Router>
    </div>
  );
}

answered Mar 04 '23 at 18:13

Piyush Satija

281
1
7

Onclick of that button, how do I route to this component? – Sritharni Natarajan Mar 04 '23 at 18:18

score 0 · Answer 2 · answered Mar 04 '23 at 18:16

As the error suggests everything inside <Routes> must be wrapped with <Route><header className="App-header"></Route> or move the Header before <Routes> so like this

<Router>
      <header className="App-header">
        <p>
          BUGHOUND
        </p>
           <Button variant="contained" >Create a bug</Button>
      </header>
        <Routes>
          <Route path="/createBug" element={<CreateBug/>}/>
        </Routes>
</Router>

I'm not able to route to another page

2 Answers2