Develop Reference

React JS : Invariant failed: You should not use <NavLink> outside a <Router>

There are many instances of this error on Stack Overflow but sadly nothing that has aided in debugging the issue. I'm trying to run my web application on localhost and when the browser opens I'm getting Invariant failed: You should not use <NavLink> outside a <Router> in the following line:
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React, { Component } from 'react';
import './App.css';
import {BrowserRouter} from 'react-router-dom';
import Main from './components/main.js';
class App extends Component {
render() {
return (
<BrowserRouter>
<Main />
</BrowserRouter>
);
}
}
Main.js
import React, {Component} from 'react';
import {Switch,Route, Router} from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store/store.js';
import JobListing from './job_listings/joblisting.js';
import JobPostings from './JobPostings/JobPostings'
import CustomJobApply from './JobApply/customApply.js';
import EasyJobApply from './JobApply/easyApplyModal.js';
import Jobs from './JobApply/jobs.js';
import JobsApplied from './JobApply/jobsApplied.js';
import ListAllConnections from './networks/listallconnections';
import ShowConnectedUsers from './networks/showconnectedusers';
import Login from './applicant/login'
import UserProfile from './applicant/userprofile'
import UserVisit from './applicant/uservisit'
import UserProfileFirst from './applicant/profilefirst'
import {history} from './../util/utils';
import Navbar from "./navbar/Navbar";
import Search from "./Search";
import UserListing from './applicant/userlistings';
import ApplicantDashBoard from './applicant/applicantDashBoard';
import RecruiterDashBoard from './applicant/recruiterdashboard';
import CityApplications from './applicant/citywiseapplication';
import DeleteAccount from './applicant/deleteapplicantaccount';
import LineChartExample from './applicant/linechartexample';
import UserSearch from './applicant/usersearch';
import ResumeView from './applicant/resumeview';
import ApplicantHome from "./feed/applicantHome.js";
import Resumes from "./JobApply/resumes.js";
import Messages from './messages/messages.js';
import RecruiterDashboard from './RecruiterDashboard/RecruiterDashboard';
import RecruiterJobsDashboard from './RecruiterJobsDashboard/RecruiterJobsDashboard';
//import PieGraph from './graph/pie.js';
class Main extends Component {
render(){
localStorage.setItem("counter",0)
localStorage.setItem("HALFFILLEDRECRUITER","")
localStorage.setItem("HALFFILLEDJOBTITLE","")
localStorage.setItem("RECRUITERNAME","");
return(
<Provider store={store}>
<Router history={history}>
<Switch>
<Route exact path="/listings" component={JobListing} />
<Route exact path="/userlisting" component={UserListing} />
<Route exact path="/postjob" component={JobPostings} />
<Route exact path="/customapply" component={CustomJobApply} />
<Route exact path="/mynetworks" component={ListAllConnections} />
<Route exact path="/" component={Login} />
<Route exact path="/easyapply" component={EasyJobApply} />
<Route exact path="/jobs" component={Jobs} />
<Route exact path="/jobs/applied" component={JobsApplied} />
<Route exact path="/navbar" component={Navbar} />
<Route exact path="/search" component={Search} />
<Route exact path="/profilefirst" component={UserProfileFirst} />
<Route exact path="/userprofile" component={UserProfile} />
<Route exact path="/uservisit" component={UserVisit} />
<Route exact path="/deleteapplicantaccount" component={DeleteAccount}/>
<Route exact path="/applicantDashBoard" component={ApplicantDashBoard}/>
<Route exact path="/recruiterdashboard" component={RecruiterDashBoard}/>
<Route exact path="/usersearch" component={UserSearch}/>
<Route exact path="/resumeview" component={ResumeView}/>
<Route exact path="/feed" component={ApplicantHome} />
<Route exact path="/recruiter/dashboard" component={RecruiterDashboard} />
<Route exact path="/recruiter/myjobs" component={RecruiterJobsDashboard} />
<Route exact path="/mynetwork/connections" component={ShowConnectedUsers} />
<Route exact path="/messages" component={Messages} />
<Route exact path="/citywiseapplication" component={CityApplications} />
<Route exact path="/linechartexample" component={LineChartExample} />
<Route exact path="/resumes/:userid/:filename" component={Resumes} />
</Switch>
</Router>
</Provider>
);
}
}
export default Main;
I noticed that I haven't include any <NavLink> in my code. What might be wrong?

Only my navbar is being displayed in my react project

Only my navbar is displaying and im not recieving any error. the homepage has just the navbar and a blank space
'''
import React from 'react';
import Navbar from './components/Navbar';
import './App.css';
import Home from './components/pages/Home';
import { BrowserRouter as Router, Routes as Switch, Route } from 'react-router-dom';
import Services from './components/pages/Services';
import Products from './components/pages/Products';
import SignUp from './components/pages/SignUp';
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/services' component={Services} />
<Route path='/products' component={Products} />
<Route path='/sign-up' component={SignUp} />
</Switch>
</Router>
</>
);
}
export default App;
'''

For you see your navbar in other pages you can test going to localhost:3000/services and see if your navbar is there.

React Project working but not displaying some components

i am trying to build a portfolio website using react and i am using react-router-dom for navigation.
everything was working for a while then i made a stupid mistake of keeping the project in onedrive and had some trouble.
link to code: https://github.com/Raghav-rv28/portfolio-website
Live: https://raghav-rv28.github.io/portfolio-website/, this is not really helpful as we cannot see anything but you can see the screenshots below,
when i run the project on my local machine it runs :
as you can see the elements are there but they just don't appear to me for some reason.
Some of the Code:
import React from 'react'
import {Route, Routes} from 'react-router-dom'
import Layout from './Components/Layout'
import Home from './Components/Home'
import About from './Components/About'
import Contact from './Components/Contact'
import Interests from './Components/Interests'
import Projects from './Components/Projects'
import './App.scss';
function App() {
return (
<>
<Routes>
<Route path="/" element = { <Layout />} >
<Route index element={< Home/>} />
<Route path='About' element={< About/>} />
<Route path='Contact' element={< Contact/>} />
<Route path='Interests' element={< Interests/>} />
<Route path='Projects' element={< Projects/>} />
</Route>
</Routes>
</>
);
}
export default App;
Layout.js:
import React from 'react';
import './index.scss';
import SideNavbar from '../SideNavbar/index';
import { Outlet } from 'react-router-dom';
export default function Layout(){
return(
<div className="App">
<SideNavbar />
<div className="page">
<Outlet />
</div>
</div>)
}
index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);

You nested your routes for (Home, About, Contact, etc.) inside the "Layout" route. This means that react router will render BOTH "Layout" and whichever component is provided by a matching nested route.
Try restructuring your routes like this:
<>
<Routes>
<Route path="/" element = { <Layout />} />
<Route index element={< Home/>} />
<Route path='About' element={< About/>} />
<Route path='Contact' element={< Contact/>} />
<Route path='Interests' element={< Interests/>} />
<Route path='Projects' element={< Projects/>} />
</Routes>
</>

Turns out my stupid As* forgot to import the animation library i'm using and the opacity for the pages was set to 0.

react-router-dom v6 renders a Route when it is supposed to not render it

I want to render private routes for logged in users. For some reason react-router-dom (v6) renders private routes even if PrivateRoute returns null. Also, I couldn't see any console.logs from inside PrivateRoute. Any ideas?
EDIT
It renders Dashboard when you go to localhost/dashboard and Settings when you go to localhost/settings, even though both components are passed to PrivateRoute, which returns null.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
App.js
import {Route, Routes} from 'react-router-dom';
import {Home} from './components/Home';
import {Pricing} from './components/Pricing';
import {Dashboard} from './components/Dashboard';
import {Settings} from './components/Settings';
import {Login} from './components/Login';
import {Header} from './components/Header';
import {PrivateRoute} from './components/PrivateRoute';
const App = () => {
return (
<div>
<Header />
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/pricing' element={<Pricing />} />
<PrivateRoute path='/dashboard' element={<Dashboard />} />
<PrivateRoute path='/settings' element={<Settings />} />
<Route path='/login' element={<Login />} />
</Routes>
</div>
);
};
export default App;
PrivateRoute.js
export const PrivateRoute = ({path, element}) => {
console.log('PrivateRoute'); **// couldn't see this in the console**
return null;
};

Unfortunately, according to the documentation, the new way to do this looks like this:
<Route
path="/protected"
element={
<RequireAuth>
<ProtectedPage />
</RequireAuth>
}
/>
https://reactrouter.com/docs/en/v6/examples/auth
Full code exemple:
https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth?file=src/App.tsx

React Router Won't Work Without Refresh

Basically, the Route component will not trigger on the click of a Link that changes the path; but after a refresh, the correct component is shown. What could solve the issue?
App component:
import React, { Component } from 'react';
/**
* Import Router
*/
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
/**
* Import custom components
*/
import IndexComponent from '../components/index_component';
import LoginComponent from '../components/login_component';
/**
* Import containers
*/
import Navbar from '../containers/Navbar';
import Footer from '../containers/Footer';
export default class App extends Component {
render() {
return (
<div>
<Navbar />
<Router>
<Switch>
<Route path="/login" component={LoginComponent} />
<Route path="/" component={IndexComponent} />
</Switch>
</Router>
<Footer />
</div>
);
}
}
Login Component:
import React, { Component } from 'react';
class LoginComponent extends Component {
render() {
return (
<div>LOGIN COMP</div>
);
}
}
export default LoginComponent;

You should enclose all your components inside <Router> that will solve your issue.
<Router>
<Navbar />
<Switch>
<Route path="/login" component={LoginComponent} />
<Route path="/" component={IndexComponent} />
</Switch>
<Footer />
</Router>

Try the following solution:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import IndexComponent from '../components/index_component';
import LoginComponent from '../components/login_component';
<Router>
<Switch>
<Route path="/login" component={LoginComponent} />
<Route path="/" component={IndexComponent} />
</Switch>
</Router>