Question

我有东西清单，当我单击一行时，我使用 onClickDetail 函数

从列表中检索了元素ID。

之后，我想将用户重定向到一个传递此元素ID的新组件我该如何处理？

App.js路由：

Whole Project

我可以在其中单击元素的地方（this.props.currentElement是id）：

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

我的onclick函数：

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

我虽然添加了app.js

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

并添加到我的 onClickDetail 函数

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

但是它不起作用。除了console.log

也许这不是最好的方法，所以我只是想知道如何处理OnClick将用户重定向到通过props的新组件。

故事情节应该是：

首页显示事物列表
点击列表中的元素
检索元素ID，将用户重定向到显示此特定元素的组件

非常感谢

Answer 1

您可以使用<Link/>节点程序包中的push方法来代替使用history。

安装历史记录：npm install history

创建一个文件history.js： import createHistory from 'history/createBrowserHistory'; const history = createHistory(); export default history;

要在其中更改网址的导入历史记录。

您的onClick功能：(url) => history.push(url);

路由器的导入历史记录：

<Router history={history} />

尝试一下：）

OnClick使用路由重定向到带有道具的组件

1 个答案: