route does not render inside the Router tag

user_18649304 0
Viewed 36

Hi guys so I have this issue with my code while learning about Routes and cannot seem to find the answer. My page does not render at some point, as I will explain below.

This is the index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./app/App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";


ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();

and this is the app.js

import React from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
import About from "../components/About";
import SignUp from "../components/SignUp";
import Articles from "../components/Articles";
import Article from "../components/Article";
import Categories from "../components/Categories";
import Author from "../components/Author";
import Profile from "../components/Profile";

import { BrowserRouter as Router, Route } from 'react-router-dom';
import "./App.css";


function App() {
  return (
    <Router>
      <Header />
      <main>
      
      </main>
      <Footer />
  </Router>
  );
}

export default App;

So far my app is rendering, BUT... when I want to do this:

<Router>
      <Header />
      <main>
            <Route path='/about'>
            <About />
            </Route>
      </main>
      <Footer />
  </Router>

then everything disappears. It does the same in the development and production build.

This is the first time I'm using Router and I am doing this project following a video tutorial and some instructions. Basically, I should be doing everything right, right?

My package.json looks like this :

    "dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-markdown": "^6.0.1",
    "react-redux": "^7.2.3",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1"

What I mean by disappearing is that the page does not render anything at all:

without route element

without route element

with the route element

with the route element

react-router-dom react-router reactjs
1 Answers

Issues

  • Route components must be rendered by a Routes component.
  • Routed content must be rendered by the Route component's element prop as a ReactNode, a.k.a. JSX.

Solution

Wrap the Route with the Routes component and render the About component on the element prop.

<Router>
  <Header />
  <main>
    <Routes>
      <Route path='/about' element={<About />} />
    </Routes>
  </main>
  <Footer />
</Router>
user_86908570
Related