We Keep Coding

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

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;

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;

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

You should never have more than one router in your app

You cannot render a inside another . You should never have more than one in your app.
Why am I having this issue? I have checked my code and I dont have a Router inside another Router. In fact, i only have one router on my app.
This is the component:
import React from 'react';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Portfolio from '../pages/Portfolio';
function Menu()
{
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Portfolio />} />
</Routes>
</BrowserRouter>
);
};
export default Menu;
And I call it from this component:
import React from 'react';
import AboutMe from '../components/AboutMe';
import Header from '../components/Header';
import Menu from '../components/Menu';
import Particle from '../components/Particle';
import Services from '../components/Services';
import Skills from '../components/Skills';
function Portfolio()
{
return (
<React.StrictMode>
<Particle />
<Menu />
<Header />
<div className='d-flex flex-column mt-5' id='about-me-services'>
<div><AboutMe /> </div>
<div><Services /> </div>
</div>
<Skills />
</React.StrictMode>
);
}
export default Portfolio;
Thanks for your help :)

Finally, Menu contains a Portfolio, which contains a Menu, which contains a Portfolio, which contains... etc. as super said. Thanks for your help

React Router render component on a separate page

I started my first React Project and want to build my Design Portfolio by myself. So it's also my first time working with React Router or try to combine Components with each other by clicking a button.
I want to render all standard components in App.js and want to link only my project with the description project pages with a button. So if the user clicked on the button they will linked to the description of this project.
But surprise it doesn't work. My problem now is that the description page rendered in the same page as the standard component like "About, Navbar, Contact" rendered. But i want that the description page from the projects rendered in a seperate page. What can i do that this work?
I guess this is my relevant code to understand what i've made so far. But if you need more snippets please say it. :)
App.js
import React, { useState, useRef } from 'react';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Contact from './components/Contact';
import Hero from './components/Hero';
import About from './components/About';
import Cards from './components/Cards';
import Sidebar from './components/Sidebar';
import Projects from './components/Projects';
import ProjectPath from './components/ProjectPath';
import Smartdress from './pages/Smartdress';
import Nazzle from './pages/Nazzle';
import Storyline from './pages/Storyline';
import Hel from './pages/Hel';
import Songstories from './pages/Songstories';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
function App() {
return (
<>
<Router>
<Navbar />
<Hero />
<Projects />
<Switch>
<Route exact path='/project/smartdress' component={Smartdress} />
<Route exact path='/project/nazzle' component={Nazzle} />
<Route exact path='/project/storyline' component={Storyline} />
<Route exact path='/project/hygienelab' component={Hel} />
<Route exact path='/project/songstories' component={Songstories} />
</Switch>
<About />
<Contact />
<Sidebar />
<Footer />
</Router>
</>
);
}
export default App;
Note: /pages/Smartdress -> are the description to the projects
Projects.js
import React, { useState } from 'react';
import CardItems from './CardItems';
import nazzle from '../assets/nazzle.png';
import smartdress from '../assets/smartdress.png';
import storyline from '../assets/2.png';
import hel from '../assets/hel.png';
import Nazzle from '../pages/Nazzle';
import Smartdress from '../pages/Smartdress';
import Hel from '../pages/Hel';
import Storyline from '../pages/Storyline';
import Songstories from '../pages/Songstories';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams,
} from 'react-router-dom';
function Projects() {
return (
<div id='projects' className='container mx-auto'>
<h1 className='line absolute ml-8 -mt-2 z-0 text-xl'>Projects</h1>
<CardItems
bg='bg-smartdress'
text='Smartdress'
subtitle='Project (Studium)'
description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
src={smartdress}
link='/project/smartdress'
/>
<CardItems
bg='bg-nazzle'
text='Nazzle'
subtitle='Project (Studium)'
description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
src={nazzle}
link='/project/nazzle'
/>
<CardItems
bg='bg-storyline'
text='Storyline'
subtitle='Forschungsprojekt (Studium)'
description='Companion für Schüler zur
spielerischen Prävention von
Fake News und Cyber Mobbing
in sozialen Netzwerken'
src={storyline}
link='/project/storyline'
/>
<CardItems
bg='bg-hel'
text='Hygiene Lab'
subtitle='Client work'
description='Schaffen eines erzählenswertens
Erlebnis vom Besuch öffentlicher
Toiletten mit kontaktlosen Produkten'
src={hel}
link='/project/hygienelab'
/>
<CardItems
bg='bg-nazzle'
text='Nazzle'
subtitle='Project (Studium)'
description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
src={nazzle}
link='/project/songstories'
/>
</div>
);
}
export default Projects;
Note: Projects render all cards of the single projects
CardItem.js
import React from 'react';
import Projects from '../components/Projects';
import Nazzle from '../pages/Nazzle';
import Smartdress from '../pages/Smartdress';
import Hel from '../pages/Hel';
import Storyline from '../pages/Storyline';
import Songstories from '../pages/Songstories';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
function CardItems(props) {
return (
<div className='container'>
<div className='my-12 mx-8 sm:mx-16 lg:mx-32 xl:mx-48 2xl:mx-80'>
<div
className={`shadow-md rounded overflow-hidden flex flex-col lg:flex-row ${props.bg}`}
>
<img
className='z-0 max-h-64 px-4 sm:max-h-80 order-1 lg:order-2 mx-auto my-12 sm:my-16 lg:mr-8 lg:max-h-96 xl:mr-16'
src={props.src}
></img>
<div className='flex flex-col justify-around order-2 lg:order-1 mb-12 sm:mb-12 mx-8 sm:mx-16'>
<div className=''>
<h1 className='font-bold'>{props.text}</h1>
<h3>{props.subtitle}</h3>
<p className='text-gray-700'>{props.description}</p>
</div>
<div className='mt-4'>
<div className='justify-center flex mt-2 lg:justify-start'>
<Link
to={props.link}
className='btn bg-indigo-700 hover:bg-indigo-300 font-bold text-white rounded shadow-md'
>
Read more
</Link>
</div>
</div>
</div>
</div>
</div>
<Router></Router>
</div>
);
}
export default CardItems;
Note: for better understanding how the cards look likes

Any component not inside a specific route will be shown on all routes.
In your case, since the About, Contact, and Sidebar components are outside the specific routes, they will be rendered for all routes - including the description page.
Try putting the components that you don't want rendered on the description page inside their own route. For example, the following should avoid rendering the About, Contact, and Sidebar components on the description page (note the comments in the code).
function App() {
return (
<>
<Router>
<Navbar />
<Hero />
<Projects />
<Switch>
<Route exact path='/project/smartdress' component={Smartdress} />
<Route exact path='/project/nazzle' component={Nazzle} />
<Route exact path='/project/storyline' component={Storyline} />
<Route exact path='/project/hygienelab' component={Hel} />
<Route exact path='/project/songstories' component={Songstories} />
</Switch>
<Switch>
<Route exact path='/project/smartdress' /> {/* render no components on the description page */}
<Route path='/project'> {/* render these components on any page starting with project ONLY IF it has not been matched by an earlier `Route` in this `Switch` */}
<About />
<Contact />
<Sidebar />
</Route>
</Switch>
<Footer />
</Router>
</>
);
}

Routing not working with react-router-dom

I'm working on one of my friend's half-built React Project. I'm trying to route my react-app with react-router-dom. The components inside the <switch> are not working. Here's my
App.js
import React from 'react';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
import ProcessInput from './components/ProcessInput';
// Import react-router-dom
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App() {
return(
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/" exact component={Main} />
<Route path="/process" component={ProcessInput} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
Main.js
import React from 'react';
import Slider from './Slider';
import Card1 from './Card1';
import Card2 from './Card2';
import Prompt from './Prompt';
class Main extends React.Component {
render() {
return (
<div>
<main>
<Slider />
<Card1 />
<Card2 />
<Prompt />
</main>
</div>
)
}
}
export default Main;
The <Header /> and <Footer /> which are outside the <Switch> are showing anyways as intended. But, I want the Main component to be loaded as a root component (Launcher).
There are no errors on the console.
Please help me get to know what am I doing wrong. Thanks in advance :)

<Route path="/" exact>
<Main/>
</Route>
<Route path="/process"><ProcessInput/>
</Route>
This is the old way to do it. You can try this

React url change but components not rendered until manual refresh

Hi im new to react and the routers. The problem is when I click on a link the URL at the top changes so I can tell that something is happening. But the page does not refresh automatically and so the new components arent rendered hen I click on it. If I manually refresh the page in chrome it will then render the correct components for the link. Not sure why this is happening.
Also I'm not sure if this has any affect on it but I do have a back end node js server and MongoDB data base this isn't just a front end react page. Im not sure if that has any affect? the functions of the nodejs server and Mongodb work it just doesn't refresh. Im not sure if that is relevant.
import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
function App() {
const[getDefault , setDefault] = useState(String);
return (
<div className="App">
<h1>react app</h1>
<Navbar/>
<BrowserRouter>
<div className="App">
<Switch>
<Route path='/app/' component={Register} exact />
<Route path='/app/login/' component={Login} exact/>
<Route path='/app/notes/' component={Notes} exact/>
</Switch>
</div>
</BrowserRouter>
</div>
);
}
/*
<div className='row'>
<div className='col-md-6'>
<Register/>
</div>
<div className='col-md-6'>
<Login/>
</div>
</div>
<div className ='row justify-content-center' >
<div className='col-md-8 '>
<Notes/>
</div>
</div>
*/
export default App;
import React, {useState} from 'react';
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
function Navbar() {
return (<div>
<p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
<div className ='navbarOptions' style={{backgroundColor:'black'}}>
<BrowserRouter>
<ul>
<Link to='/app/' exact style={{ fontSize:'30px', color: '#48c6ef', fontWeight: '700'}}>
<li >
Register
</li>
</Link>
<Link to='/app/login/' exact style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>
<li>
Login
</li>
</Link>
<Link to='/app/notes/' exact style={{fontSize:'30px', color: '#48c6ef' , fontWeight:'700'}}>
<li >
Notes
</li>
</Link>
</ul>
</BrowserRouter>
</div>
</div>
);
}
export default Navbar ;
Here it shows login in the URL but is still rendering notes when I refresh the page it will show notes

You don't need to use browserrouter in the navlink, only use in router and also put the BrowserRouter before the switch
Like this:-
import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
function App() {
const[getDefault, setDefault] = useState('');
return (
<div className="App">
<h1>react app</h1>
<Navbar/>
<div className="App">
<BrowserRouter>
<Switch>
<Route path='/app/' component={Register} exact />
<Route path='/app/login/' component={Login} exact/>
<Route path='/app/notes/' component={Notes} exact/>
</Switch>
</BrowserRouter>
</div>
</div>
);
}
export default App;

Remove BrowserRouter in your navbar component. I think that should work, normally we have to use BrowserRouter once.

BrowserRouter should wrap all route things, that means that you should put the links within the Browser Router
import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";
function App() {
const[getDefault, setDefault] = useState('');
return (
<div className="App">
<h1>react app</h1>
<BrowserRouter>
<Navbar/>
<div className="App">
<Switch>
<Route path='/app/' component={Register} exact />
<Route path='/app/login/' component={Login} exact/>
<Route path='/app/notes/' component={Notes} exact/>
</Switch>
</div>
</BrowserRouter>
</div>
);
}
export default App;
import React, {useState} from 'react';
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';
function Navbar() {
return (
<div>
<p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
<div className ='navbarOptions' style={{backgroundColor:'black'}}>
<ul>
<Link to='/app/' exact style={{ fontSize:'30px', color: '#48c6ef', fontWeight: '700'}}>Register</Link>
<Link to='/app/login/' exact style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>Login</Link>
<Link to='/app/notes/' exact style={{fontSize:'30px', color: '#48c6ef' , fontWeight:'700'}}>Notes</Link>
</ul>
</div>
</div>
);
}
export default Navbar ;