Javascript 反应路由器：活动链接与URL不匹配

我遵循react-redux的示例：将react路由器添加到项目中

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/Root.js
从“React”导入React；
从'react redux'导入{Provider}；
从“./App”导入应用程序
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
常量根=（{store}）=>(
);
导出默认根目录；

组件/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

从“React”导入React
从“../containers/FilterLink”导入FilterLink
常量页脚=（）=>(

展示：
{" "}
全部的
{", "}
活跃的
{", "}
完整的

)
导出默认页脚

容器/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;

从“React”导入React；
从“react router dom”导入{NavLink}
常量过滤器链接=（{filter，children}）=>{
console.log（“filter:+filter”）；
console.log（“children:+children”）；
返回(
{儿童}
);
}
导出默认过滤器链接；

我得到的结果是：

根据代码，活动链接应与URL相同。即使URL显示“localhost:3008/active”，活动链接也显示为“all”，类似于completed

---

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

尝试添加

/

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>
  );

}

---

在“localhost:3008/active”加载页面时是否也会发生这种情况？或者只是单击导航链接时出错？即使在浏览器上直接加载页面

localhost:3008/active

，也会出现这种情况。这几乎奏效了。但是对于

active

和

complete

而言，页脚中的

all

链接显示为activated。对于

private

，

private

和

all

均显示为已激活。对于

completed

，

completed

和

all

均显示为激活链接<代码>全部链接显示始终激活。为什么“/”的问题始终处于活动状态

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

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