We Keep Coding

React Router V6 Uncaught Error: You cannot render a <Router> inside another <Router>

I currently have my app as follows with my routes wrapped inside of BrowserRouter and I am receiving
Uncaught Error: You cannot render a <Router> inside another <Router>
Below is my codesandbox
I did a
ctl + F + Shift
and only have 1 router in my app. Does anyone see a syntax error or have a suggestion?
Codesandbox
Here is my App component:
import { BrowserRouter, Routes, Route, Router, Link } from "react-router-dom";
import Header from "./components/Header/Header";
import Features from "./components/body/Features/FeaturesGrid/FeaturesGrid";
import Artists from "./components/body/Artists/Artists";
import Fans from "./components/body/Fans/Fans";
import Groups from "./components/body/Groups/Groups";
import Footer from "./components/body/Footer/Footer";
import PPV from "./components/body/PPV/PPV";
function App() {
return (
<BrowserRouter>
<nav>
<Header />
</nav>
<Routes>
<Route path="/" element={<App />} />
<Route path="/features" element={<Features />} />
<Route path="/artists" element={<Artists />} />
<Route path="/fans" element={<Fans />} />
<Route path="/groups" element={<Groups />} />
<Route path="/ppv" element={<PPV />} />
{/* <Route path="/feed" element={<Feed />} /> */}
</Routes>
</BrowserRouter>
);
}
export default App;
Here is my Header component:
import { useState } from "react";
import HeaderCSS from "../Header/Header.module.css";
import Menu from "../../svgs/bars-solid.svg";
import Close from "../../svgs/times-solid.svg";
import Logo from "../../svgs/logotrans.svg";
import { Link } from "react-router-dom";
function Header() {
const [menu, setMenu] = useState(false);
const toggleMenu = () => {
setMenu(!menu);
};
const styleMenu = {
left: menu ? 0 : "-100%",
};
return (
<header>
<div className={HeaderCSS.menu} onClick={toggleMenu}>
<img src={Menu} alt="" width="30" />
</div>
<div className="logo">
<img src={Logo} all="" width="120" height="90" />
</div>
<div className={HeaderCSS.nav_container}>
<ul style={styleMenu}>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/features">Features</Link>
</li>
<li>
<Link to="/artists">Artists</Link>
</li>
<li>
<Link to="/fans">Fans</Link>/
</li>
<li>
<Link to="/groups">Groups</Link>
</li>
<li>
<Link to="/ppv">PPV</Link>
</li>
<li>
<Link to="/feed">Feed</Link>
</li>
<li onClick={toggleMenu}>
<img src={Close} alt="" width="30" className="menu" />
</li>
</ul>
</div>
</header>
);
}
export default Header;

You are rendering App recursively
<Route path="/" element={<App />} />
You can't do that
Replace App with another component
<Route path="/" element={<div />} />

Why is my ProtectedRoutes component broken?

I am reusing this component from another project, and I can't figure out why it doesn't work in this one despite working in the other one.
It should check if the user has a token in their cookies, and then redirect to the homepage if they don't. If they do, they should see the component.
I'm not receiving any errors. The page always redirects to the homepage.
ProtectedRoutes.js
import React from "react";
import { Navigate } from "react-router-dom";
import Cookies from "universal-cookie";
const cookies = new Cookies();
export default function ProtectedRoutes({component: Component, ...rest}) {
//get the cookie if there is one
const token = cookies.get("TOKEN");
//if there is a valid cookie, show component, otherwise go to homepage
return token ? <Component /> : <Navigate to="/" />
}
App.js
import './App.css';
import React from 'react';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import HomeScreen from './Components/HomeScreen';
import LoginScreen from './Components/LoginScreen';
import RegisterScreen from './Components/RegisterScreen';
import AccountScreen from './Components/AccountScreen';
import PreferencesScreen from './Components/PreferencesScreen';
import ProtectedRoutes from './Components/ProtectedRoutes';
import Cookies from 'universal-cookie';
const cookies = new Cookies();
function App() {
const openMenu = () => {
document.querySelector(".sidebar").classList.add("open");
}
const closeMenu = () => {
document.querySelector(".sidebar").classList.remove("open");
}
const logout = (e) => {
e.preventDefault();
cookies.remove("TOKEN", {path: "/"});
window.location.href="/"
}
return (
<BrowserRouter>
<div className="container">
<header className="header">
<div className="brand">
<button className="sidebar-button" onClick={openMenu}>
☰
</button>
<Link to="/" >Title</Link>
</div>
<div className="header-links">
<Link to="/signin" >Sign In</Link>
<Link to="/myaccount/" >My Account</Link>
<Link to="/logout" onClick={(e) => logout()}>Logout</Link>
</div>
</header>
<aside className="sidebar">
<button className="sidebar-close-button" onClick={closeMenu}>x</button>
<div className="sidebar-links">
<h4>New Entry</h4>
<h4>New Entry</h4>
</div>
</aside>
<main className="main">
<div className="content">
<Routes>
<Route exact path="/" element={<HomeScreen />} />
<Route exact path="/register" element={<RegisterScreen />} />
<Route exact path="/signin" element={<LoginScreen />} />
<Route exact path="/myaccount" element={<ProtectedRoutes component={AccountScreen} />} />
<Route exact path="/preferences" element={<PreferencesScreen />} />
</Routes>
</div>
</main>
</div>
</BrowserRouter>
);
}
export default App;

React Router not rendering anything

when using react-router-dom, I cannot render any of my components or anything.
All it does is show a white screen, it doesn't add anything to my index.html template.
There aren't any errors however it says that in index.js there are unused variables that are my components.
Heres my code:
index.js
// Imports
import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { navbar, footer, home } from './components';
ReactDOM.render(
<Router>
<navBar />
<Routes>
<Route path="/" element={<home />} />
</Routes>
<footer />
</Router>,
document.getElementById("root")
);
home.jsx
import React from "react";
function home(){
return(
<div className="home">
<div class="container">
<div class="row allign-items-center my-5">
<div class="col-lg-7">
<img class="img-fluid rounded mb-4 mb-lg-0" src="./img/pizza.jpg" alt=""/>
</div>
<div class="col-lg-5">
<h1 class="font-weight-light">cencored</h1>
<p>cencored</p>
</div>
</div>
</div>
</div>
)
}
export default home;
navBar.jsx
import React from 'react';
import {NavLink} from 'react-router-dom';
function navBar(){
return(
<div className="navBar">
<nav className="navbar navbar-expand navbar-dar bg-dark">
<div className="container">
<NavLink className="navbar-brand" to="/"><img src="../img/logo.png" alt="logo" style="width:500px;height:500px;"/></NavLink>
<div>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link" to="/menu">Menu</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/about">About</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/contact">Contact</NavLink></li>
</ul>
</div>
</div>
</nav>
</div>
);
}
export default navBar;
footer.jsx
import React from 'react';
import {NavLink} from 'react-router-dom';
function footer(){
return(
<div className="footer">
<footer class="py-5 bg-dark fixed-bottom">
<div class="container">
<p class="m-0 text-center text-white">cencored</p>
</div>
<div>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link" to="/">Home</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/menu">Menu</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/about">About</NavLink></li>
<li className="nav-item">
<NavLink className="nav-link" to="/contact">Contact</NavLink></li>
</ul>
</div>
</footer>
</div>
);
}
export default footer;
index.js (component exports)
export { default as navbar } from './navBar';
export { default as footer } from './footer';
export { default as home } from './home';

Instead of using the element prop on your Route try to component prop like
<Route path="/" component={Home}>
You also must capitalize components.

React components should use PascalCase names.
export { default as Navbar } from './navBar';
export { default as Footer } from './footer';
export { default as Home } from './home';
...
import { Navbar, Footer, Home } from './components';
ReactDOM.render(
<Router>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
</Routes>
<Footer />
</Router>,
document.getElementById("root")
);

You are missing import of Switch from 'react-router-dom' and after you have to wrap your Routes into . And into Routes you have to add all of your components with path not only Home component.
Pseudo code:
import { Switch, Route, Router } from "react-router-dom";
import Home from '.....path'
//import all routing componets
const Routes = () => {
return(
<Switch>
<Route exact path='/' component={Home}>
<Route exact path='/comp1' component={Comp1}>
<Route exact path='/comp2' component={Comp2}>
</Switch>)}
const App = () => {
<Router>
<GlobalNav />
<Container fluid={true}>
<SideNav />
<Routes />
</Container>
</Router>}
Then you can add your navbar anywhere but has to be wrapped into router. I just added as example i can have a typo somewhere but if you follow the concept it should work. And change your components to Pascal naming.

ReactJs Router changes url but not the page

I am building a portfolio website and am using react BrowserRouter, Link and Switch to manage my websites routing My problem is that when I click on the 'Projects' link it changes on url but not in view, however when I refresh the page it works.
here is what my routing currently looks like in my App.js.
import React, { Component } from 'react';
import NavBar from './Components/NavBar/NavBar'
import Home from './Components/Home/Home';
import Projects from './Components/Projects/Projects';
import { BrowserRouter ,Switch, Route, } from 'react-router-dom';
class App extends Component {
render() {
return (
<div className="App">
<NavBar />
<BrowserRouter>
<Switch>
<Route path="/" component={Home} exact={true} />
<Route path="/projects" component={Projects} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
and this is what my Navbar.js looks like..
import React, {useState} from 'react';
import { NavLink, BrowserRouter } from 'react-router-dom'
import { Link } from 'react-scroll';
function NavBar() {
const [navbar,setNavbar] = useState(false)
const changeBackground = () => {
if(window.scrollY >= 100) {
setNavbar(true)
} else {
setNavbar(false)
}
}
window.addEventListener('scroll', changeBackground)
return(
<BrowserRouter>
<ul className="nav bg-white sticky-top nav-tabs nav-justified">
<li className="nav-item">
<Link
className={navbar ? "nav-link text-dark home" : "nav-link text-secondary home"}
to="home"
href="/"
smooth={true}
offset={50}
duration={500}>
Home
</Link>
</li>
<li className="nav-item">
<Link
className={navbar ? "nav-link text-dark home" : "nav-link text-secondary about"}
to="about"
smooth={true}
offset={50}
duration={500}>
About
</Link>
</li>
<li className="nav-item">
<NavLink to="/projects">Projects</NavLink> //This is the link that won't work.
</li>
<li className="nav-item">
<Link
className={navbar ? "nav-link text-dark home" : "nav-link text-secondary contact"}
to="contact"
smooth={true}
offset={50}
duration={500}>
Contact
</Link>
</li>
</ul>
</BrowserRouter>
)
}
export default NavBar
Any help would be great!

The problem is that you're defining two different BrowserRouter. All your routing logic should be under one BrowserRouter:
App should be like this:
class App extends Component {
render() {
return (
<div className="App">
<BrowserRouter>
<NavBar />
<Switch>
<Route path="/" component={Home} exact={true} />
<Route path="/projects" component={Projects} />
</Switch>
</BrowserRouter>
</div>
);
}
}
and NavBar should not have the wrapping BrowserRouter

Can you separate Links and Routes in separate JS files?

I have a Nav.js file and an App.js file
Nav.js -
import { Link, Router } from 'react-router-dom'
render() {
return (
<Router>
<ul className="nav-list">
<li><Link to="/">Home<Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</Router>
)
}
App.js -
import Nav from './nav.js'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
render() {
return (
<Nav />
<Router>
<Switch>
<Route exact path="/" />
<Route exact path="/about" />
<Route exact path="/contact" />
</Switch>
</Router>
)
}
This doesn't work for some reason, but I feel like it should based off the react-router-dom docs. React Router seems like it should be simple but I'm having a hard time with the learning curve. I can't really get things to work the way I want them to. Does anyone know how it can be setup this way or have a good reference to clarify some things up for me?

You can address this issue in two files
but within the same BrowserRouter tags you have missed this in your given sample. It should be,
import Nav from './nav.js'
import { BrowserRouter, Route, Switch } from "react-router-dom"
render() {
return (
<BrowserRouter>
<Nav />
<Switch>
<Route exact path="/" />
<Route exact path="/about" />
<Route exact path="/contact" />
</Switch>
</BrowserRouter>
)
}
hope this will help you.

In an app created by create-react-app (I am using reactstrap, but you can remove it and do without it):
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Nav from './components/Navigation'; // top (fixed) navigation
import Footer from './components/Footer'; // bottom (fixed) footer
import Home from './components/Home';
import One from './components/One';
import Two from './components/Two';
...
ReactDOM.render(
<Provider store={store}>
<div>
<BrowserRouter>
<div>
<Route path="/" component={Navigation} />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/one" component={One} />
<Route path="/two" component={Two} />
</Switch>
<Footer />
</BrowserRouter>
</div>
</Provider>
, document.querySelector('#root'));
Navigation.js:
import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
class Navigation extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="faded" light expand="md">
<NavbarBrand tag={Link} to="/">
<img src="/assets/images/book_lover.png" alt="book-lover!" />
</NavbarBrand>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink tag={Link} to="#">
</NavLink>
</NavItem>
</Nav>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
{this.props.loginEmail && <NavItem>
<NavLink tag={Link} to="/cats">Book-Categories</NavLink>
</NavItem>}
<NavItem>
<NavLink tag={Link} to="/howto">How-To-Use-This-Site</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to="/about">About</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<hr />
</div>
);
}