I'm a begginer at React.Js and i just made the following code at my App.js file:

import React, { useState } from 'react';
import {v4 as uuidv4}      from "uuid";
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"

import "./App.css";

import Tasks_comp from "./components/Tasks";
import AddTask    from './components/AddTask';
import Header     from './components/Header';

const App = () => {
  const [tasks_var, setTasks] = useState([
    {
      id: "1",
      title: "study",
      completed: false,
    },
    {
      id: "2",
      title: "read",
      completed: true,
    }
  ]);

  const handleTaskClick = (taskId) => {
    const newTasks = tasks_var.map((cada_task) =>{
      if (cada_task.id === taskId){
        return {...cada_task, completed: ! cada_task.completed}
      }
      else{
        return cada_task;
      };
    });
    setTasks(newTasks);
  }

  const handleRemoveClick = (taskId) => {
    const newTasks = tasks_var.filter(function(obj) {
      return obj.id !== taskId
    })
    //também possível fazer com método splice. pesquisar
    setTasks(newTasks);
  }

  const handleTaskAddition = (taskTitle) => {
    const newTasks = [...tasks_var, {  //dica abaixo
      title: taskTitle,
      id: uuidv4(), //valor aleatório
      completed: false,
    }]; // equivalente ao push

    setTasks(newTasks);
  }

  return (
    <Router>
      <div id='my_div' className="container">
      <Header/>
      <Routes>
        <Route path='/' element={() => (
          <React.Fragment>
            <AddTask addTask_atr={handleTaskAddition}/>
            <Tasks_comp task_rmv_click={handleRemoveClick} tasks_atr={tasks_var} task_arg_click={handleTaskClick}/>
          </React.Fragment>
        )} />
      </Routes>
      </div>
    </Router>
  );
}

export default App;

It is not happening any mistake. But my problem is: the components inside routes are not loading at the moment i start the site. The component 'header' is being showed, but 'AddTask' and 'Tasks_comp' are not. Can anybody help me?

I'm actually doing a react course, but the teacher is using an older version of react, and i want to learn by the newer version. He does not need to use Routes. But nowadays i'm only able to use Route if i'm inside a Routes component, right?

CodePudding user response：

On Route, do not pass a function ()=>{} to element.

This should be just the component that renders at this path.

More about Route

Hope this will help.

Example:

<Router>
  <div id="my_div" className="container">
    <Header />
    <Routes>
      <Route
        path="/"
        element={
          <React.Fragment>
            <AddTask addTask_atr={handleTaskAddition} />
            <Tasks_comp
              task_rmv_click={handleRemoveClick}
              tasks_atr={tasks_var}
              task_arg_click={handleTaskClick}
            />
          </React.Fragment>
        }
      />
    </Routes>
  </div>
</Router>

CodePudding user response：

Try this, for newer version

<BrowserRouter>
      <div id='my_div' className="container">
      <Header/>
      <Routes>
        <Route path='/' element={
          <React.Fragment>
            <AddTask addTask_atr={handleTaskAddition}/>
            <Tasks_comp task_rmv_click={handleRemoveClick} tasks_atr={tasks_var} 
            task_arg_click={handleTaskClick}/>
          </React.Fragment>
        />
      </Routes>
      </div>
</BrowserRouter>