时间戳

首页 > 解决方案 > 更改路径更改时按钮的外观

reactjs - 更改路径更改时按钮的外观

问题描述

发生开关的主应用程序如下所示

function App() {
  return (
    <Router>
        <div className="App">
          <Navbar/>
          <div className="content">
            <Switch>
              <Route exact path="/">
                <Home/>
              </Route>
              <Route exact path="/create">
                <Create/>
              </Route>
            </Switch>
        </div>
      </div>
    </Router>
  )

我的导航栏组件目前看起来像这样

import { Link } from "react-router-dom"


const Navbar = () => {
  const handleClick = () => {
    console.log(window.location.pathname)
  }

  return (
    <nav className="navbar">
      <h1>Testing</h1>
      <div className="links">
          <Link to="/" onClick={handleClick}>Home</Link>
          <Link to="/create"
                style = {{
                  color: 'white',
                  backgroundColor: '#2d38d4',
                  borderRadius: '8px'
          }}>Finance</Link>
      </div>
    </nav>
  );
}
   
export default Navbar;

我打算用handleClick它来制作它，以便单击的人接收样式，但是我意识到如果我这样做了，如果有人像这样直接更改了 url，它不会改变按钮的外观localhost/ -> localhost/app，反之亦然。

在 React 中如何管理这样的选择？

受我在这里标记为正确的答案的启发，它是：

import { NavLink } from "react-router-dom"


const Navbar = () => {
  const activeStyle = {
    color: 'white',
    backgroundColor: '#2d38d4',
    borderRadius: '8px'
  }

  return (
    <nav className="navbar">
      <h1>Testing</h1>
      <div className="links">
          <NavLink exact to="/"
                activeStyle = {activeStyle}>Home</NavLink>
          <NavLink to="/create"
                activeStyle = {activeStyle}>Finance</NavLink>
      </div>
    </nav>
  );
}
   
export default Navbar;

标签： reactjs

解决方案

您应该使用 NavLink 组件而不是 Link 组件，因为如果您在 to 设置的同一 Route 上，NavLink 会自动向链接添加一个活动类。


import { NavLink } from "react-router-dom"


const Navbar = () => {
  const handleClick = () => {
    console.log(window.location.pathname)
  }

  return (
    <nav className="navbar">
      <h1>Testing</h1>
      <div className="links">
          <NavLink to="/" onClick={handleClick}>Home</NavLink>
          <NavLink to="/create">Finance</NavLink>
      </div>
    </nav>
  );
}
   
export default Navbar;

然后在你的 CSS 中（不管你在做什么）你只需要设置活动类的样式。

官方文档还提供了一些示例，说明如何像最初一样直接为您自己的活动类或链接样式设置样式。 https://reactrouter.com/web/api/NavLink

推荐阅读