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';
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?
here are the error i am battling with, how do i fix this? and also i have tried several answer still did not work, a little help from you will be helpful.
i create a webpackconfig.js and added some answer i saw in it, still not working for me, how do i fix it?
my index.js
import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./app/store";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./index.css";
import Dashboard from "./pages/dashboard";
import Register from "./pages/register";
import Login from "./pages/login";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</Route>
</Routes>
</BrowserRouter>
<ToastContainer />
</Provider>
</React.StrictMode>
);
reportWebVitals();
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/>
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
If I remove Router import from Main.js (I alrady use router in index.js and Router is never used in Main.js) - app pages in Main.js stop showing app at all. Wrapping Routes in another Router does not work either. What should I do?
index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
App.js:
import React from "react";
import Navigation from "./components/Navigation/Navigation.js";
import Main from "./components/Main/Main.js";
const App = () => {
return (
<div className="app">
<Navigation />
<Main />
</div>
);
};
export default App;
Main.js:
import React from "react";
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
import Home from "../../pages/Home.js";
import Contacts from "../../pages/Contacts.js";
import About from "../../pages/About.js";
import CardList from "../../components/CardList/CardList.js";
const Main = () => (
<>
<Route exact path="/" component={Home}>
<Redirect to="/products" />
</Route>
<Route path={["/products/:id", "/products"]} component={CardList} />
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contacts}></Route>
</>
);
export default Main;
first routes should come between switch
const Main = () => (
<>
<Switch>
<Route exact path="/" component={Home}>
<Redirect to="/products" />
</Route>
<Route path={["/products/:id", "/products"]} component={CardList} />
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contacts}></Route>
<Switch/>
</>
);