Why react is not rendering anything using router?

Question

When I try to display the elements, I can't display anything, even with the <Link to=""> working fine. I want a simple navbar using react-router-dom, to make a multiple pages web app. I hope this error can be solved without any advanced code, cause I'm trying to learn the basics of React first.

App.js:

import './App.css';
import { useEffect, useState } from "react"
import axios from 'axios';
import React from "react"
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom"
import home from './home'
import userlist from './userlist'

function App() {
  return (
    <body>
      <header>
        <div className="divheadertitle">
          <h1 className="headertitle">Tree.io</h1>
        </div>
        <Router>
          <nav>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/userlist">User list</Link></li>
            </ul>
          </nav>
        </Router>
      
        <Router>
          <Routes>
            <Route path='/userlist' element={<userlist />} />
            <Route path='/' element={<home />} />
          </Routes>
        </Router>
      </header>
    </body>
  )
}

export default App;

userlist.js:

import React from "react"
import axios from 'axios'
import { useState, useEffect } from "react"

const userlist = () => {
  const [listOfUsers, setListOfUsers] = useState([])

  useEffect(() => {
    axios.get('https://localhost:3001/userlist')
      .then((response) => {
        setListOfUsers(response.data)
      })
  })

  return (
    <div className="userlistdiv">
      <h1>Lista de usuários:</h1>
      {listOfUsers.map((user) => {
        return(
          <div className="userdiv">
            <h1>Name: {user.name}</h1>
            <h1>Age: {user.age}</h1>
            <h1>E-mail: {user.email}</h1>
          </div>
        )
      })}
    </div>
  )
}
export default userlist;

Drew Reese · Accepted Answer · 2022-10-01 09:22:04Z

The links are rendered into a different router than the routes. React components are also Capitalized. Move all the links and routes into the same router.

import Home from './home'
import Userlist from './userlist'

function App() {
  return (
    <body>
      <header>
        <div className="divheadertitle">
          <h1 className="headertitle">Tree.io</h1>
        </div>
        <Router>
          <nav>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/userlist">User list</Link></li>
            </ul>
          </nav>
          <Routes>
            <Route path='/userlist' element={<Userlist />} />
            <Route path='/' element={<Home />} />
          </Routes>
        </Router>
      </header>
    </body>
  );
}

Additionally, the Userlist component is unconditionally fetching data and updating state, this is likely leading to some render looping. Add a dependency array.

useEffect(() => {
  axios.get('https://localhost:3001/userlist')
    .then((response) => {
      setListOfUsers(response.data)
    });
}, []); // <-- empty dependency array to run once on mount

Anurag Srivastava · Accepted Answer · 2022-10-01 09:28:56Z

0

Try this instead of function in your map method:

{
    listOfUsers.map((user) =>(
        <div className="userdiv">
            <h1>Name: {user.name}</h1>
            <h1>Age: {user.age}</h1>
            <h1>E-mail: {user.email}</h1>
        </div>
    ))
}

and make sure your api send your response truthly. If you want to run an effect and clean it up only once, you can pass an empty array [ ] as dependency I hope all of these be useful for you

edited Oct 1, 2022 at 9:28

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

answered Oct 1, 2022 at 9:27

Maedeh Javadi

35 bronze badges

1 Comment

Drew Reese Over a year ago

Switching from a function body and explicit return is functionally equivalent to no function body and implicit return here. I don't think there's any issue to resolve in this part of the code.

Collectives™ on Stack Overflow

Why react is not rendering anything using router?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related