reactjs - 在布局上设置所选项目

Question

我想添加一个 css 类来指示是否选择了一个元素 (.active)

在 Main.js 中

<Layout>
    <Route path="/cars/:id" exact strict component={ Car } />
    <Route path="/something-else" component={ OtherComponent } />
</Layout

在我的 Layout.js 中

我只有一个链接列表

<Link to="/cars/1">car 1</Link>
<Link to="/cars/2">car 2</Link>
<Link to="/cars/3">car 3</Link>

如您所见，我想在两个组件中使用相同的布局 汽车 其他组件

这仅适用于 Car 组件。但我想在 Layout 组件中使用类似的东西，这样我就可以将 id 与汽车 id 进行比较，并将该项目标记为事件。

useEffect(() => {

    const id = props.match.params.id;

}, [props])

有没有办法在没有 useContext 的情况下做到这一点？

Answer 1

使用 <NavLink><Link>的特别版当它与当前 URL 匹配时，它将向呈现的元素添加样式属性。
<NavLink to="/about">About</NavLink>
事件类名:字符串

当元素处于事件状态时提供元素的类。默认给定的类是事件的。这将与 className Prop 一起使用。

<NavLink to="/faq" activeClassName="active">
  FAQs
</NavLink>