我可以使用React Router 4切换路由吗？

Question

我正在使用模态侧边栏构建应用，您知道在中滑动的那种。

这些侧边栏都有独特的路线（例如： appdomain.com/sidebar/1234 ）。 当用户点击侧边栏名称列表中的任何项目时，我想显示这些侧边栏。

问题在于：

当我再次点击列出的名称时，如何使用Link或NavLink取消渲染路径？

Answer 1

如果要单击以转到路线，然后再次单击以返回浏览器历史记录，请使用此选项：

import { NavLink, Route, NavLinkProps, withRouter } from 'react-router-dom';

<MenuLink className="btn btn-link" role="button" to="/pricing">
  Pricing
</MenuLink>

function MenuLink(props) {
  return (
    <Route
      path={props.to}
      children={({ match }) =>
        match ? (
          <GoBackComp className={props.className}>{props.children}</GoBackComp>
        ) : (
          <NavLink {...props}>{props.children}</NavLink>
        )
      }
    />
  );
}

const GoBack = ({ history, children, className }) => (
  <div role="button" className={className} onClick={() => history.goBack()}>
    {children}
  </div>
);

const GoBackComp = withRouter(GoBack);

TypeScript：

import { NavLink, Route, NavLinkProps, withRouter } from 'react-router-dom';
import { RouteComponentProps } from 'react-router';

function MenuLink(props: MenuLinkProps) {
  return (
    <Route
      path={props.to}
      children={({ match }) =>
        match ? (
          <GoBackComp className={props.className}>{props.children}</GoBackComp>
        ) : (
          <NavLink {...props}>{props.children}</NavLink>
        )
      }
    />
  );
}

const GoBack = ({ history, children, className }: GoBackProps) => (
  <div role="button" className={className} onClick={() => history.goBack()}>
    {children}
  </div>
);

interface MenuLinkProps extends NavLinkProps {
  children: any;
  className: string;
  to: string;
}

interface GoBackProps extends RouteComponentProps {
  children: any;
  className: string;
}

const GoBackComp = withRouter(GoBack);

  

您可以使用<Link>组件代替<NavLink>