Debug School

rakesh kumar
rakesh kumar

Posted on • Updated on

React error:[RegisterForm] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

I am trying to use routing for the first time and followed the exact instructions
[RegisterForm] is not a component. All component children of must be a or 

Uncaught runtime errors:
×
ERROR
[RegisterForm] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (http://localhost:3000/static/js/bundle.js:1264:11)
    at http://localhost:3000/static/js/bundle.js:40170:108
    at http://localhost:3000/static/js/bundle.js:42432:21
    at http://localhost:3000/static/js/bundle.js:42395:21
    at mapIntoArray (http://localhost:3000/static/js/bundle.js:42298:27)
    at mapIntoArray (http://localhost:3000/static/js/bundle.js:42343:27)
    at mapChildren (http://localhost:3000/static/js/bundle.js:42394:7)
    at Object.forEachChildren [as forEach] (http://localhost:3000/static/js/bundle.js:42431:7)
    at createRoutesFromChildren (http://localhost:3000/static/js/bundle.js:40158:47)
    at Routes (http://localhost:3000/static/js/bundle.js:40017:20)
ERROR
[RegisterForm] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (http://localhost:3000/static/js/bundle.js:1264:11)
    at http://localhost:3000/static/js/bundle.js:40170:108
Enter fullscreen mode Exit fullscreen mode

my app.js

import './App.css';
import HomePage from './pages/HomePage'
import LoginPage from './pages/LoginPage'
import About from './pages/About'
import RegisterForm from './pages/RegisterForm';
import LoginForm from './pages/LoginForm';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
return (

<Router>
  <Routes> 
    <RegisterForm />
    <LoginForm />
    <Route path="/" element={<HomePage />} />       
    <Route path="/about" element={<About />} />  
    <Route path="/mylogin" element={<LoginPage />} />

  </Routes>
</Router>
Enter fullscreen mode Exit fullscreen mode

);
}

export default App;

Solution:
here problem because of

<RegisterForm />
 <LoginForm />
Enter fullscreen mode Exit fullscreen mode

Improved the coding

import './App.css';
import HomePage from './pages/HomePage'
import LoginPage from './pages/LoginPage'
import About from './pages/About'
import RegisterForm from './pages/RegisterForm';
import LoginForm from './pages/LoginForm';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (

    <Router>
      <Routes> 

        <Route path="/" element={<HomePage />} />       
        <Route path="/about" element={<About />} />  
        <Route path="/mylogin" element={<LoginPage />} />
        <Route path="/register" element={<RegisterForm />} />  
        <Route path="/login" element={<LoginForm />} />    
      </Routes>
    </Router>

  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

=================================================================

Top comments (0)