Why react is not rendering anything using router?-CodePudding

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;

CodePudding user response：

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

CodePudding user response：

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