Develop Reference

React-Router-Dom (v6) not working / Can't render the home component

After updating to react router V6 my component no longer renders:
Trying to render the home component within my app, seems like the router is correctly organized according to React Router V6.
I am able to render the "SubredditAside" component which is located outside of the in the App.js but trying to render the Home component doesnt seem to be working
App.js:
import React from 'react';
import {
BrowserRouter,
Routes,
Route,
Router,
} from "react-router-dom";
import { selectDarkMode } from "../features/Theme/themeSlice";
import { useSelector } from "react-redux";
import './App.css';
import "../features/Theme/theme.css";
import Header from "../features/Header/Header";
import Home from "../features/Home/Home";
import SearchResults from "../features/SearchResults/SearchResults";
import SubredditsAside from "../features/SubredditsAside/SubredditAside";
import Subreddit from "../features/Subreddit/Subreddit";
import NotFoundPage from '../features/NotFoundPage/NotFoundPage';
function App() {
const darkMode = useSelector(selectDarkMode);
return (
<BrowserRouter>
<div id="app-container" className={darkMode ? "dark" : "light"}>
<Header />
<main>
<Routes>
<Route path="/" component={Home}/>
<Route path="/r/:id" component={Subreddit}/>
<Route path="/search/:id" component={SearchResults}/>
<Route component={NotFoundPage} />
</Routes>
</main>
<aside>
<SubredditsAside />
</aside>
</div>
</BrowserRouter>
);
}
export default App;
Home.js
import React, { useEffect } from "react";
import Filters from "../Filters/Filters";
import Post from "../Post/Post";
import PostLoading from "../Post/PostLoading";
import NotFoundPage from "../NotFoundPage/NotFoundPage";
import { AnimatedList } from "react-animated-list";
import { useDispatch, useSelector } from "react-redux";
import {
loadPostsHot,
selectPosts,
selectIsLoading,
selectError,
} from "../../app/appSlice";
import { setCurrentSubreddit } from "../SubredditsAside/SubredditAsideSlice"
import { setCurrentFilter } from "../Filters/filtersSlice";
const Home = ({ match }) => {
const dispatch = useDispatch();
const posts = useSelector(selectPosts);
const isLoading = useSelector(selectIsLoading);
const error = useSelector(selectError);
const currentSubreddit = match.params.id;
useEffect(() => {
dispatch(setCurrentFilter("hot"));
dispatch(setCurrentSubreddit(""));
dispatch(loadPostsHot());
}, [dispatch, currentSubreddit]);
if (error) {
return <NotFoundPage />;
}
return (
<>
<Filters />
{isLoading ? (
<AnimatedList>
<PostLoading />
<PostLoading />
<PostLoading />
</AnimatedList>
) : (
posts.map((post, index) => (
<Post key={index} post={post} postIndex={index} />
))
)}
</>
);
};
export default Home;
Index.js:
import React from 'react';
import { ReactDOM } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from '../src/app/App';
import reportWebVitals from './reportWebVitals';
import './index.css';
import "#fontsource/roboto";
// import "./base.css";
import { BrowserRouter } from 'react-router-dom';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);

React render function not returning the simple HTML codes from it's components

I am creating a project using MERN stack.In my App.js I imported some react component but while I run it shows a blank White screen.
App.js
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route} from "react-router-dom";
import Navbar from "./components/navbar"
import CreateUser from "./components/create-user";
function App() {
return (
<Router>
<div className="container">
<Route path="/" component={Navbar} />
<br/>
<Route path="/user" component={CreateUser} />
</div>
</Router>
);
}
export default App;
navbar.js
import React, { Component } from 'react';
// import { Link } from 'react-router-dom';
export default class Navbar extends Component {
render() {
return (
<h1>Pantha</h1>
);
}
}

Routing returns white page in React.js

I'm trying to set up routing but for some reason, it returns a blank page and renders nothing.
I'm using router version 6.3.0
// 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')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Route path="/landing">
<Landing />
</Route>
<Footer />
</Fragment>
);
}
}
export default App;
// --------------------------------------------- //
// Landing.js
import Body from './Body'
function Landing(props) {
return (
<Body>
<div className="Landing">
Landing Context
</div>
</Body>
)
}
export default Landing;
So when I visit http://localhost:3000/landing nothing is rendered, and when I try http://localhost:3000 nothing is rendered either.
If I remove the <Route></Route> part in App.js, it renders, but on any URL. What do I miss?

As the OP is using react-router-dom v6
Instead of children, it is expecting element props to render the component.
https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes

In app.js wrap your route in router like this
import React, { Component, Fragment } from "react";
import { Router, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Router>
<Route path="/landing">
<Landing />
</Route>
</Router>
<Footer />
</Fragment>
);
}
}
export default App;

react-router v6 has some breaking changes, it replaced Switch with Routes component:
/ 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')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Routes>
<Route path="/landing" element={<Landing />}/>
</Routes>
<Footer />
</Fragment>
);
}
}
export default App;
https://reactrouter.com/docs/en/v6/getting-started/overview

If your are using react-router version < 6 then you have to add Switch element imported from react-router-dom above your Route Element -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Switch>
<Route path="/landing">
<div>On LAnding Page</div>
</Route>
</Switch>
</Fragment>
);
}
}
export default App;
And if you are using react-router > 6 then you have to replace Switch with Routes and place your component you want to render inside element property of Route . The code should be similar to following -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Routes } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Routes>
<Route path="/landing"
element={<div>On Landing Page</div>}>
</Route>
</Routes>
</Fragment>
);
}
}
export default App;

You should not use <Route> or withRouter() outside a <Router>

I have wrapped my index.js file to support a Redux Store and React-Router-v4.
However, when I try to run a basic test, I get the following error message:
Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
Here is what my index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
// Redux
import { Provider } from 'react-redux';
import store from "./store/index";
ReactDOM.render((
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
), document.getElementById('root'));
registerServiceWorker();
and here is my App.js:
import React, { Component } from 'react';
import { ScaleLoader } from 'react-spinners';
import { withRouter } from 'react-router';
import Header from './components/Header';
import Footer from './components/Footer';
import Main from './Main';
import './styles/styles.scss';
// Redux
import { connect } from 'react-redux';
import store from "./store/index";
import { isLoading } from "./actions/index";
class App extends Component {
constructor() {
super();
store.dispatch(isLoading(true));
}
componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname) {
store.dispatch(isLoading(true));
}
}
render() {
return (
<div className='App'>
<Header />
<div className='App__wrapper'>
<div className={'loading-spinner ' + (this.props.isLoading ? null : '--hide-loader')}>
<ScaleLoader
color={'#123abc'}
loading={this.props.isLoading}
/>
</div>
<Main />
</div>
<Footer />
</div>
);
}
}
const mapStateToProps = (state) => ({ isLoading: state.isLoading });
export default withRouter(connect(mapStateToProps)(App));
Since I'm using withRouter to wrap for navigation, is this method discouraged? Should I be setting up withRouter at the index.js level?
Thank you!

Try importing your BrowserRouter like this:
import { BrowserRouter as Router } from 'react-router-dom'
Then replace everywhere it appears BrowserRouter with Router instead.

React router issue

Hi i have problems getting routes work.
Here is my route.js
import React, { Component } from 'react';
import Home from './Home';
import Add from './Add';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
export default (
<Router history={browserHistory}>
<IndexRoute component={Home}/>
<Route path='/' component={Home} />
<Route path='/add/' component={Add} />
</Router>
);
Here is App.js
import React, { Component } from 'react';
import routes from './route';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Router history={hashHistory}>{routes}</Router>
);
}
}
export default App;
Here is Add.js
import React, { Component } from 'react';
import Header from './Views/Header';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
import './styles/App.css';
import './styles/layout.css';
class Add extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className=" ">
<Header />
<h2> Add a cake </h2>
</div>
);
}
}
export default Add;
I haven't added Home.js because Home works just fine.
but when i click '/add' url points to 'http://localhost:3000/add#/' but nothing happens.
can you please help.
Thanks

The problem is you are using a Router within a Router in App.js, one with hashHistory and the other with browserHistory.
Change your Routes to
import React, { Component } from 'react';
import Home from './Home';
import Add from './Add';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
export default (
<Router history={browserHistory}>
<IndexRoute component={Home}/>
<Route path='/' component={Home} />
<Route path='/add' component={Add} />
</Router>
);
and app.js to
import React, { Component } from 'react';
import routes from './route';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>{routes}</div>
);
}
}
export default App;