Question 74524 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Switch is not working in react router dom – Reactjs

Switch in react router dom is not working!

problem seems to arrive when rendering the AddTodo and Todos element!

Tried replacing the switch with route but it still does not reem to render anything

return (
<>
  <Router>
    <Header title="Task" />
    <Routes>
      <Route exact path="/" render={() => {
        return (
          <>
            <AddTodo addTodo={addTodo} />
            <Todos todos={todos} onDelete={onDelete} />
          </>
        )
      }} >
      </Route>

      <Route exact path="/about" element={<About />}></Route>
    </Routes>


    <Footer />
  </Router>
</>

);

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Worked for me when i did this !

    return (

  <BrowserRouter>
    <Header title="Task" />
    
    <Routes>
      <Route exact path ="/" element={
        <>
        <AddTodo addTodo={addTodo}/>
        <Todos todos={todos} onDelete={onDelete} />
        </>
      }
      />
      <Route exact path ="/" element={<Todos todos={todos} onDelete={onDelete} />} />
      

      <Route exact path="/about" element={<About />}></Route>
    </Routes>


    <Footer />
  </BrowserRouter>

    );


  2. 0

    use BrowserRouter for last version (v6)

    return (
<>
  <BrowserRouter>
    <Header title="Task" />
    <Routes>
      <Route exact path="/" element={() => {
        return (
          <>
            <AddTodo addTodo={addTodo} />
            <Todos todos={todos} onDelete={onDelete} />
          </>
        )
      }} >
      </Route>

      <Route exact path="/about" element={<About />}></Route>
    </Routes>


    <Footer />
  </BrowserRouter>
</>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search