React.js & django, useParams не может перейти на страницу

В настоящее время я создаю приложение react с django, я пытаюсь перейти с HomePage на DataPage с соответствующим id. Однако, он возвращает ошибку Page not found. Я использую 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.

Вот мой 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);

И я хочу перейти на страницу DataPage ниже:

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);

Я подумал, нужно ли мне настроить url.py и во фронтенде, и нужно ли мне сначала определить назначенное значение для {id}, возвращаемого из компонента materialui. Возможно, мне нужно button или <Link><Link/> для навигации вместо того, чтобы просто вводить url? Все еще не повезло после многих попыток. Я сейчас в полном замешательстве.

Если вы знаете, что не так с моим кодом, пожалуйста, не стесняйтесь оставить комментарий. Спасибо

После многих попыток и проверки документов, мне действительно не нужно настраивать мой urls.py. Единственное, чего мне не хватает, это добавить параметр в naviagate() от onRowClick={((rowData, event) => {navigate('data/');})} до onRowClick={((rowData, event) => {let id = event.sample_ID; navigate('data/' + id)})}; Я думал, что проблема слишком сложная.

Спасибо, что поделились!

Вернуться на верх