如何使NAVLINK观察案例灵敏度

Question

我想知道如何修复此代码以允许NavLink观察案例灵敏度。我已经将敏感道具添加到Route组件中无济于事。我在这里看到的是，单击first或second，当我只希望单击的项目与样式接合时，将导致两个链接的活动链接样式启用。谢谢。

import * as React from "react";
import { render } from "react-dom";
import { BrowserRouter, NavLink, Route, Switch } from "react-router-dom";
const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};
const Header = () => {
  return (
    <header>
      <h1>Welcome To Example!</h1>
      <nav id="nav" role="navigation">
        <ul>
          <li>
            <NavLink to="/">Home</NavLink>
          </li>
          <li>
            <NavLink to="/first">First</NavLink>
          </li>
          <li>
            <NavLink to="/First">Second</NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
};
const HomePage = () => {
  return <h1>HomePage</h1>;
};
const FirstPage = () => {
  return <h1>FirstPage</h1>;
};
const SecondPage = () => {
  return (
    <div>
      <h1>SecondPage</h1>
    </div>
  );
};
const App = () => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route exact path="/" sensitive component={HomePage} />
        <Route exact path="/first" sensitive component={FirstPage} />
        <Route path="/First" sensitive component={SecondPage} />
      </Switch>
    </div>
  </BrowserRouter>
);
render(<App />, document.getElementById("root"));

Answer 1

我从来没有做过大写字母的路线，但我记得在样式上遇到问题。无论如何，我向您展示了我这样做的方式，以防您。

路由组件

import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import Home from './components/templates/home';
import Portfolio from './components/templates/portfolio';
import NotFound from './components/templates/notfound';

const Routes = ({ history }) => {
  const { location } = history;
  return (
    // Here we add the location to the switch component
    // It can help with CSSTransition/TransitionGroup
    <Switch location={location}>
      <Route path="/" exact component={Home} />
      <Route path="/portfolio" exact component={Portfolio} />
      <Route path="*" exact component={NotFound} />
    </Switch>
  );
};

export default withRouter(Routes);

编辑：我发现您需要执行一些逻辑才能使此工作。我制作了一个处理这种情况的组件。

import { Route, Link } from 'react-router-dom';
const Nav = ({
  children,
  to,
  exact,
  className,
  ...rest
}) => (
  <Route
    path={to}
    exact={exact}
    // Needed to render whether the path matches the location or not. 
    children={({ match }) => (
      <Link
        // Here we compare the matching url with our path
        className={
          match && to === match.url ? `${className} active` : className
        }
        to={to}
        // Here we avoid adding the same route to the history
        replace={match && to === match.url}
      >
        {children}
      </Link>
    )}
  />
);

我在此处编辑了您的代码沙盒

Answer 2

React路由器永远不会知道启用sensitive Prop作为true后的first或First。现在所有链接都称为first。

但是，如果没有复杂的URL作为:dynamic，则可以使用简单的修复className={location.pathname === '/first' && 'active'}而不是 react Router 的activeClassName。

当 NavLink活动：

时，您的CSS规则

.active
{
  color:red;
}

一个简单的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import {
  Route,
  NavLink,
  BrowserRouter as Router,
  Switch,
} from 'react-router-dom';
import App from './App';
import Users from './users';
import Contact from './contact';
import Notfound from './notfound';
const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <NavLink exact activeClassName="active" to="/">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink className={location.pathname === '/first' ? 'active' : ''} to="/first">
            Users
          </NavLink>
        </li>
        <li>
          <NavLink className={location.pathname === '/First' ? 'active' : ''} to="/First">
            Contact
          </NavLink>
        </li>
      </ul>
      <hr />
      <Switch>
        <Route exact sensitive path="/" component={App} />
        <Route sensitive path="/users" component={Users} />
        <Route sensitive path="/contact" component={Contact} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'));