Question

当我启动项目时，我没有使用create-react-app 我建立了基本的react-flux应用程序，就像使用browserify和babelify一样而react-router v4正在运行，没有问题发生

然后我移民到create-react-app env 使用提供的测试和构建工具

我安装了以前正确使用的所有软件包但react-router v4有问题

单击NavLink时，它不会更改URL 但是当我手动更改URL时，它可以正常工作

我像这样使用BrowserRouter：

    <BrowserRouter history={HashRouter}<App /></BrowserRouter>,document.getElementById("root"));

和NavLink一样：

    <NavLink className="nav-link" activeClassName="active" to={"/drugs"}>
                            <i className="fa fa-medkit" aria-hidden="false"/>
                            &nbsp;Drugs
                        </NavLink>

和路由器一样：

   <Switch>
                <Route exact={true} path="/" component={Patients}/>
                <Route exact path="/drugs" component={Drugs}/>
                <Route exact path="/settings" component={Settings}/>
                <Route path="*" component={Error}/>
            </Switch>

并提前致谢。

Answer 1

您的组件很可能无法正确更新。如果您继承自React.PureComponent而不是React.Component，或者弄乱了方法shouldComponentUpdate()，就会发生这种情况。

如果无法解决（应该这样做），您仍然可以使用location中的HOC withRouter手动传递react-router-dom对象，就像这样：

import { withRouter } from 'react-router-dom';

const Menu = ({ location }) => (
  <menu>
    <NavLink
      className="nav-link"
      activeClassName="active"
      location={location}
      to="/drugs"
    >
      <i className="fa fa-medkit" aria-hidden="false" />
      &nbsp;Drugs
    </NavLink>
  </menu>
);

export default withRouter(Menu);

注意：为清楚起见，大多数进口商品已被剔除

Answer 2

问题是<Navlink to={"/drugs"}。当您使用{}时，您表示您将使用JS，并且由于"/drugs"无效，因此它失败。

取而代之的是删除{}。

<NavLink className="nav-link" activeClassName="active" to="/drugs">

react-router v4 NavLink不会更改URL

2 个答案: