Question

我正在尝试从其子级儿童组件之一中选择一个主应用程序。我的项目的结构如下：

<Main>
    <titlebar>
    <Router>
        <Link to={"/home}>Home</Link>
        <Link to={"/search}>Search</Link>
        ...
    </Router>

    <Switch>
        <Route exact path="/" component={Home}
        <Route exact path="/search" component={Search} />
    <Switch>
    <footer>
</Main>

<Home>
    <Messages and stuff>
    ...
    <List />
    ...
<Home>

<List>
    list.map => (
        <button?>View</button>
        <thing.id>
        ...
    )
</List>

<View>
    ...info about thing ...
</View>

我的目标是能够单击列表中的特定按钮，并使Main从站点/重新路由到站点/视图{id}，类似于在Main中单击“搜索”将路由到站点/搜索的方式。我不想让View出现在Home或List内，而是希望它成为Main的子代。我将如何处理？通过手动切换功能？在某处链接某物？我对React和Router相对较新，但是从文档中我什么都没找到。

Answer 1

欢迎！

您需要一条看起来像这样的路线...

<Route path="/view/:id" component={View} />

和类似链接

<Link to=/view/${thing.id}>Click me!</Link>

请注意:id，它表示view/之后有一个变量

然后在您的 View 组件中，您将通过this.props.location

访问ID

如果您希望传递整个列表项，而不只是ID（因为出于某种原因无法从 View 组件访问数据），您还可以像这样传递整个项

<Link to={{ pathname: '/view', state: thing }}>Click Me!</Link>

然后在视图组件中查看this.props.location.state

也要抬头，除非计划在尾随斜线之后放东西，否则您无需在路线中exact。

例如...

route="/" 需要完全

route="/item" 不需要是否需要精确

route="/season" 需要确切原因是它具有子路由（弹簧）

route="/season/spring" 不需要是因为它没有其他子路由了，所以不需要精确

Answer 2

有两种方法

将函数从main传递给child作为道具，以获取被点击的ID并相应地加载视图数据
因此，您使用的是React Router，您可以再添加一条路由

有关详细信息，请参见下面的示例链接

[CodePen]  https://codepen.io/dwarka/pen/PLEMWX

React-如何从子div路由父div

2 个答案: