react-router-dom Link tag not rendering page

Question

I'm very new to React. I'm trying to get basic routing working with react-router-dom but I cannot get the Link tag to work. The URL changes but the component linked to does not get rendered. No errors in the console. Any help would be much appreciated. I am using react-router-dom version 5.3.0

Here is the code:

import React from 'react'
import {Link} from 'react-router-dom'

const ListTasks = ({task}) => {
  return (
    <Link to = {`/task/${task.id}/`}>
    <h3>{task.description}</h3></Link>
  )
}

export default ListTasks

App.js

import './App.css';
import Header from "./components/Header";
import TaskListPages from './pages/TaskListPages'
import TaskPage from './pages/TaskPage'
import {
  BrowserRouter,
  HashRouter,
  Route,
  Router,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
    <div className="App">
    <Header/>
    <Route path="/" exact component={TaskListPages}/>
    <Route path="/task/:id"  component={TaskPage}/>
    </div>
    </BrowserRouter>
  );
}

export default App;

Thanks.

Answer 1

I think It's a bug in your specific version 5.3.0. Try 5.3.3.

5.3.0 doesn't work properly with react 18 I don't think.