OnClick перенаправить на компонент с реквизитом, используя маршрут

Question

У меня есть список вещей. Когда я нажимаю на строку, я извлекаю идентификатор элемента из своего списка с помощью функции onClickDetail

После этого я хочу перенаправить пользователяновому компоненту, передающему этот элемент ID Как я могу справиться с этим?

Маршрут App.js:

 <HashRouter>
    <Provider store={store}>
      <Switch>
        <Route exact path="/login" name="Login Page" component={Login} />
        <Route exact path="/register" name="Register Page" component={Register} />
        <Route exact path="/404" name="Page 404" component={Page404} />
        <Route exact path="/500" name="Page 500" component={Page500} />
        <PersistGate loading={null} persistor={persistor}>
        <Route path="/" name="Home" component={DefaultLayout} />
        </PersistGate>
      </Switch>
      </Provider>
  </HashRouter>

Где я могу щелкнуть на своем элементе (this.props.currentElement - это идентификатор):

        <td><i className="fa fa-edit fa-lg " style={{color: '#63c2de'}}
 onClick={this.handleClick.bind(this, this.props.currentElement)}></i></td>

Моя функция onclick:

    handleClick = (currentElement) => {
           console.log('list ref' , currentElemnt); // display my id ok
return (
        <Link to={"/listDetail/" + currentElement}>my list detail id : {currentElement}</Link>)
    }

Я хотя и добавляю в app.js

<Route path="/listDetail/:id" component={ListDetail}>

И добавляю к моей onClickDetail функцию

<Link to={"/listDetail/" + id}>my list detail id : {id}</Link>

Но это не такза работой.Ничего не происходит, за исключением console.log

Может быть, это не лучший способ сделать это, поэтому я просто хотел узнать, как обрабатывать OnClick, чтобы перенаправить моего пользователя на новый компонент, передавая реквизиты.

Сюжетная линия должна быть:

• Отображение главной страницы Список вещей
• Нажмите на элемент в списке
• ИД элемента получен,пользователь перенаправлен на компонент, который отображает этот конкретный элемент

Большое спасибо

Answer 1

В компоненте HomePage, поскольку он отображается от <Route />, он должен получать реквизиты маршрутизатора, такие как match и history.

Итак, внутри вашей функции onClick вам просто нужно сделать что-то вроде

function onClick(id) {
    this.props.history.push("/listDetail/" + id);
}

Answer 2

вместо <Link/>, вы можете использовать метод push из history пакета узла.

История установки: npm install history

Создайте файл history.js: import createHistory from 'history/createBrowserHistory'; const history = createHistory(); export default history;

история импорта, где вы хотите изменить свой URL.

Ваша функция onClick: (url) => history.push(url);

история импорта, где находится ваш маршрутизатор:

<Router history={history} />

Попробуйте это так:)