与React-Router的活动链接?

React.js

飞云Pro

2020-03-16

我正在尝试React-Router(v4),但从Nav开始让Linkbe 之一出现问题active如果我单击任何Link标签,则活动的东西开始工作。但是,我希望Home Link可以在应用启动后立即启动,因为那是在/路线上加载的组件有什么办法吗?

这是我当前的代码:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName='is-active' to='/about'>About</Link>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

第1714篇《与React-Router的活动链接?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
神奇Green 2020.03.16

我知道我参加聚会有点晚了,但是我可以通过设置内联样式来处理此问题 :focus(无论您的样式是什么),我都会处理大多数内联样式,但是我很确定这也可以在常规样式表中使用。只是使用

:focus

代替

:active

编辑

由于种种原因(大部分是嵌入式软件),我无法使用CSS样式表。因此,我已经开始喜欢内联样式(与观点相反,内联样式在包含8000行代码,跨越37个文件的项目中效果很好,而对性能没有影响)。但是不幸的:active是,当像这样内联使用选择器时,它会出错,因此我使用了上面的方法。

这样做的另一种方法是,因为我知道内联样式有点被忽略了,是active使用所需的nav-element样式创建一个CSS 类,并保留一个状态变量来跟踪当前页面的高度。范围(最好是根组件),并在用户导航到另一个页面时进行更新。这可以通过包装<Redirect/><Link to={}/>使用处理更新状态和导航的功能组件来完成,然后在导航组件中检查渲染的导航元素是否与当前页面匹配,如果是,则将activeCSS类附加到当前页面

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android