I am current building a react app with django, I am trying to navigate from the HomePage to the DataPage with corrsponding id. However, it return Page not found error. I am using react-router-dom v6.

Using the URLconf defined in robot.urls, Django tried these URL patterns, in this order:

admin/
api/
api-auth/
homepage
homepage/data
The current path, homepage/data/54, didn’t match any of these.

Here is my App.js

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  renderHomePage() {
    return (
        <HomePage />
    );
  }

  render() {
    return (
      <BrowserRouter>
        <Routes>
          <Route exact path='homepage/' element={this.renderHomePage()} />
          <Route path='homepage/data/:id' element={<DataPage />} />
        </Routes>
      </BrowserRouter>
    )
  }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);

And I want to navigate to the DataPage below:

const EmtpyGrid = theme => ({
    Grid: { ... }
});


function DataPage(props) {
    const { classes } = props;
    const { id } = useParams();

    return (
        <div>
          ... some material ui components ...
        <div/>
    )
};

DataPage.propTypes = {
    classes: PropTypes.object.isRequired,
  };


export default withStyles(EmtpyGrid)(DataPage);

I was thinking whether I need configure my url.py in frontend as well, and I need to define a designated value for {id} returned from the materialui component first. Perhaps I need a button or <Link><Link/> for the navigation instead of just simply typing in the url? Still, no luck after many attempts. I am so confused right now.

If you know what is wrong with my code, please feel free to leave a comment. Thanks