I am very beginner in React and while I was practicing Router, I found that does not return the related component.
below is the code.
p.s. BrowserRouter works properly is the Hello world has been rendered.
import React, {Component} from 'react';
import {Route, BrowserRouter} from 'react-router-dom';
import './App.css';
import MainPage from './MainPage';
import About from './About';
class App extends Component {
render(){
return (
<BrowserRouter>
<div> Hello world</div>
<Route exact path="/" component={MainPage}/>
<Route path="about" component={About}/>
</BrowserRouter>
);
}
}
export default App;
For react router dom 6 it should be element:
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
// import your route components too
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
<Route path="new" element={<NewTeamForm />} />
<Route index element={<LeagueStandings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>,
document.getElementById("root")
);
Sources: https://reactrouter.com/docs/en/v6/getting-started/overview
if you use react-router-dom^6
import {Route, BrowserRouter, Routes} from 'react-router-dom';
<BrowserRouter>
<div> Hello world</div>
<Routes>
<Route exact path="/" element={<MainPage />} />
<Route exact path="/about" element={<About />} />
</Routes>
</BrowserRouter>
or you use react-router-dom^5
import {Route, BrowserRouter, Switch} from 'react-router-dom';
<BrowserRouter>
<div> Hello world</div>
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/about" component={About}/>
</Switch>
</BrowserRouter>
You need to wrap Route with Routes or Switch(depending on which version of react-router-dom are you using)
import React, {Component} from 'react';
import {Route, BrowserRouter} from 'react-router-dom';
import './App.css';
import MainPage from './MainPage';
import About from './About';
class App extends Component {
render(){
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/about" component={About}/>
</Switch>
</BrowserRouter>
);
}
}
export default App;
Make sure to import it as well!
add / before about route and add Switch or Routes (according to the installed version) to it
Configuring React Router
import React, {Component} from 'react';
import {Route, BrowserRouter, Switch} from 'react-router-dom';
import './App.css';
import MainPage from './MainPage';
import About from './About';
class App extends Component {
render(){
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/about" component={About}/>
<Switch>
</BrowserRouter>
);
}
}
export default App;
I recommend that you append component after def. of the last Route.
like this...
<Route path="about" component={About}/>
<Outlet/>
Related
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?
code for app.js .. i have been trying to use ROUTE but unable to render my components
import './App.css';
import Home from './pages/Home';
import Rooms from './pages/Rooms';
import SingleRoom from './pages/SingleRoom';
import Error from './pages/Error';
import { Route, Switch} from 'react-router-dom';
function App() {
return (
<>
<Route exact path="/" component={Home}/>
<Route exact path="/rooms/" component={Rooms}/>
<Route exactpath="/singleroom" component={SingleRoom}/>
</>
);
}
export default App;
You need to wrap your Routes in the Router and Routes components.
This is for react-router-dom v6:
import './App.css';
import Home from './pages/Home';
import Rooms from './pages/Rooms';
import SingleRoom from './pages/SingleRoom';
import Error from './pages/Error';
import { Routes, Route, Switch, BrowserRouter as Router } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/rooms/" element={<Rooms />} />
<Route path="/singleroom" element={<SingleRoom />}/>
</Routes>
</Router>
);
}
export default App;
Assuming you already wrapped your app with <Router> inside your index.js file, now every time you use routes You need to wrap them with <Switch>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/rooms/" component={Rooms}/>
<Route exactpath="/singleroom" component={SingleRoom}/>
</Switch>
I've been trying to solve this for a few hours now, everything I do returns this same error.
Matched leaf route at location "/cadastro" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.
routes.js file
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import App from './App';
import Cadastro from "./pages/cadastro";
import CadastroGuiasTuristicos from "./pages/cadastro-guia-turistico";
import DetalhesGuiasTuristicos from "./pages/detalhes-guias-turistico";
import GuiasTuristicos from "./pages/guias-turisticos";
import Home from "./pages/home";
import Login from "./pages/login";
import PlanoEstabelecimentos from "./pages/plano-de-assinatura/estabelecimentos";
import PlanoGuias from "./pages/plano-de-assinatura/guias-turisticos";
const RoutesTeste = () => {
return(
<BrowserRouter>
<Routes>
<Route path="/" component={ <Home/> }></Route>
<Route path="/cadastro" component={ <Cadastro/> }></Route>
<Route path="/cadastro-guia-turisticos" component={ <CadastroGuiasTuristicos/> }></Route>
<Route path="/detalhes-guias-turisticos" component={ <DetalhesGuiasTuristicos/> }></Route>
<Route path="/guias-turisticos" component={ <GuiasTuristicos/> }></Route>
<Route path="/login" component={ <Login/> }></Route>
<Route path="/estabelecimentos" component={ <PlanoEstabelecimentos/> }></Route>
<Route path="/guias-turisticos" component={ <PlanoGuias/> }></Route>
</Routes>
</BrowserRouter>
)
}
export default RoutesTeste;
App.js
import RoutesTeste from './routes';
export default function App() {
return (
<RoutesTeste/>
);
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
In Route ,change component to element.
Instead of -
<Route path="/" component={ }>
<Route path="/cadastro" component={ }>
do this-
<Route path="/" element={ }>
<Route path="/cadastro" element={ }>
for all the Route.
Replace the component with element as follows;
<Route path="/" element={ <Home/> }></Route>
It will work...
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
After I setted up routing on client side by react-router-dom all I got it's just blank empty pages.
So, my setup is here. I bet something is wrong but I can't get it.
So how come? What's wrong?
Index:
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import {
HashRouter as Router,
Route,
Link
} from 'react-router-dom'
import App from './containers/app.js';
import configureStore from './store/configureStore';
import routes from './routes';
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<Router routes={routes} />
</Provider>,
document.getElementById("content")
);
Routes are here:
import React from 'react';
import ReactDOM from 'react-dom';
import {
HashRouter as Router,
Route,
Link
} from 'react-router-dom';
import App from './containers/app.js';
import Settings from './components/settings/settings.js';
import NotFound from './components/common/notfound';
export default (
<Route exact path="/" component={App}>
<Route exact path="/settings" component={Settings} />
<Route path="*" component={NotFound} />
</Route>
)
Try to change this section to:
ReactDOM.render(
<Provider store={store}>
<Router>
<Route exact path="/" component={App}>
<Route exact path="/settings" component={Settings} />
<Route path="*" component={NotFound} />
</Route>
</Router>
</Provider>,
document.getElementById("content")
);
I don't think react-router v4 recognizes this part: <Router routes={routes} />
Revised:
There are two problems with the above codes.
1) You should not place a subroute inside a route. This part is incorrect:
<Route exact path="/" component={App}>
<Route exact path="/settings" component={Settings} />
<Route path="*" component={NotFound} />
</Route>
2) <NotFound /> is always rendered no matter what the path is.
Solution:
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import {
HashRouter as Router,
Route,
Link,
} from 'react-router-dom'
import App from './containers/app.js';
import configureStore from './store/configureStore';
import routes from './routes';
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<Router>
<Route path="/" component={App} />
</Router>
</Provider>,
document.getElementById("content")
);
App.js
Insert this codes to where you want to render the contents:
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/settings" component={Settings} />
<Route path="*" component={NotFound} />
</Switch>
Do not forget to add import {Switch, Route} from 'react-router-dom';