utils.ts:757 Uncaught Error: [div] is not a <Route> component-CodePudding

I try to make a route of Register and Login components inside a div(className='container') in react-router v6, but when i try to access these components I reach a blank page, then when i rid the div class it works very well, i don't know if the problem from the div. please help me to fix it:

this is my code:

enter code here

import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";


function App() {
  return (
  
  <Router >
   
    <div className="App">
      <Navbar />
      <Routes>
      <Route  path="/" element={<Landing />} />
        <div className="container">
        <Route path="/register" element={<Register />} />
        <Route path="/login" element={<Login />} />
        </div>
     </Routes>
            <Footer />
      
      </div>
     
   </Router>
   );
}

export default App;

import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';


 class Register extends Component {
  render() {
    return (
      <div >
        <h1>Register</h1>
       
      </div>
    )
  }
}


export default Register;

import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';

 class Login extends Component {
  render() {
    return (
      <div>
        <h2>Login</h2>
      </div>
    )
  }
}


export default Login;

import React, { Component } from 'react';
import { Link, Outlet } from "react-router-dom";

class Landing extends Component {
  render() {
    return (
      <div className="landing">
    <div className="dark-overlay landing-inner text-light">
      <div className="container">
        <div className="row">
          <div className="col-md-12 text-center">
            <h1 className="display-3 mb-4">Developer Connector
            </h1>
            <p className="lead"> Create a developer profile/portfolio, share posts and get help from other developers</p>
            <hr />
            <Link to="/register" className="btn btn-lg btn-info mr-2">Sign Up</Link>
            <Link to="/login" className="btn btn-lg btn-light">Login</Link>
            
          </div>
         
        </div>
       
      </div>
     
    </div>
   
  </div>

    )
  }
};

export default Landing;

CodePudding user response：

When you try to put a DIV object as a route, the problem occurs. I suggest you remove the DIV from the APP component and put it inside each page (register, login) as needed. Wish you the best!

import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";


function App() {
  return (
  
  <Router >
   
    <div className="App">
      <Navbar />
      <Routes>
      <Route  path="/" element={<Landing />} />
      <Route path="/register" element={<Register />} />
      <Route path="/login" element={<Login />} />
     </Routes>
            <Footer />
      
      </div>
     
   </Router>
   );
}

export default App;

CodePudding user response：

Don't use div inside Routes. Use Route with some custom components.