React Router：活动 Link 与 URL 不匹配

Question

我正在关注 react-redux 的例子：将 React Router 添加到项目中

components/Root.js


import React from 'react';
import { Provider } from 'react-redux';
import App from './App'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Root = ({ store }) => (
    <Provider store={store}>
        <Router>
            <Switch>
                <Route exact path='/' component={ App }/>
                <Route path="/:filter" component={ App }/>
            </Switch>
        </Router>
    </Provider>
);

export default Root;

components/Footer.js

import React from 'react'
import FilterLink from '../containers/FilterLink'

const Footer = () => (
  <p>
    Show:
    {" "}
    <FilterLink filter="all">
      All
    </FilterLink>
    {", "}
    <FilterLink filter="active">
      Active
    </FilterLink>
    {", "}
    <FilterLink filter="completed">
      Completed
    </FilterLink>
  </p>
)

export default Footer

containers/FilterLink.js

import React from 'react';
import { NavLink } from 'react-router-dom'

const FilterLink = ({ filter, children }) => {

    console.log("filter: "+filter);
    console.log("children: "+children);

    return (
      <NavLink
        to={filter === 'all' ? '' : filter}
        activeStyle={{
          textDecoration: 'none',
          color: 'black',
        }}
      >
        {children}
      </NavLink>
    );

}

export default FilterLink;

我得到的结果是：

根据代码，活动 link 应与 URL 相同。即使 URL 显示“localhost:3008/active”，活动 link 也显示为“全部”并且类似于已完成。

出了什么问题以及为什么相应的 link 没有按照 URL 激活。

Answer 1

尝试添加 /

const FilterLink = ({ filter, children }) => {

  console.log("filter: "+filter);
  console.log("children: "+children);

  return (
    <NavLink
      // / is added via string interpolation
      to={filter === 'all' ? '' : `/${filter}`}
      activeStyle={{
        textDecoration: 'none',
        color: 'black',
      }}
    >
      {children}
    </NavLink>
  );

}

或

import React from 'react'
import FilterLink from '../containers/FilterLink'

const Footer = () => (
  <p>
    Show:
    {" "}
    <FilterLink filter="/all">
      All
    </FilterLink>
    {", "}
    <FilterLink filter="/active">
      Active
    </FilterLink>
    {", "}
    <FilterLink filter="/completed">
      Completed
    </FilterLink>
  </p>
)

export default Footer

并更新 FilterLink 组件中的检查：

to={filter === '/all' ? '' : filter}

React Router：活动 Link 与 URL 不匹配

React Router: Active Link not matching the URL

javascript

reactjs

react-router-dom