【问题标题】:react-routers take two - six times to redirect to other pagesreact-routers 需要两到六次才能重定向到其他页面
【发布时间】:2018-11-15 16:33:52
【问题描述】:

(问题)react-router 需要两到六次重定向到其他页面

这是我点击的链接。

<div className='drawer-item' onClick={this.drawerItemClicked}>
     <BinaryLink to={link_to}>
          <span className={icon || undefined}>{text}</span>
     </BinaryLink>
</div>

当项目(链接)被点击时,drawerItemClicked 被触发。

drawerItemClicked = (e) => {
    this.props.hideDrawers();
    if (this.props.collapseItems) {
        this.props.collapseItems();
    }        
}

同时,BinaryLink 被触发

export const BinaryLink = ({ to, children, ...props }) => {
    const path  = normalizePath(to);
    const route = getRouteInfo(path);
    console.log('to');
    console.log(to); <- triggers continuously
    if (!route) {
        throw new Error(`Route not found: ${to}`);
    }

    return (
        to ?
            <NavLink to={path} activeClassName='active' exact={route.exact} {...props}>
                {children}
            </NavLink>
        :
            <a href='javascript:;' {...props}>
                {children}
            </a>
    );
};

这是路由器类

const routes = [
    { path: '/',          component: TradeApp, exact: true },
    { path: '/statement', component: Statement, is_authenticated: true },
    { path: '/account',   component: LostPassword, is_authenticated: false },
];

const RouteWithSubRoutes = route => (
    <Route
        exact={route.exact}
        path={route.path}
        render={props => (
            (route.is_authenticated && !Client.isLoggedIn()) ? // TODO: update styling of the message below
                <a href='javascript:;' onClick={redirectToLogin}>{localize('Please login to view this page.')}</a> :
                <route.component {...props} routes={route.routes} />
        )}
    />
);

export const BinaryRoutes = () => routes.map((route, idx) => (
    <RouteWithSubRoutes key={idx} {...route} />
));

发生了可怕的错误。但我无法排除故障。

to 的输出一直在调用 routes.js,因为它正在从服务器渲染当前时间。但是,即使我删除它,它也不起作用。

...
routes.js:48 undefined
rroutes.js:47 to
routes.js:48 undefined
routes.js:47 to
routes.js:48 undefined
routes.js:47 to
routes.js:48 undefined
routes.js:47 to
routes.js:48 undefined
routes.js:47 to
routes.js:48 undefined
routes.js:47 to
routes.js:48 undefined

我的想法我定义&lt;NavLink&gt;的地方肯定有问题

【问题讨论】:

    标签: reactjs react-native react-router react-redux react-navigation


    【解决方案1】:

    原来是 CSS 错误。 &lt;a&gt; 标签没有占用div 中的全部空间。我希望这能解决其他人的问题。

    【讨论】:

      猜你喜欢
      • 2018-09-28
      • 2020-04-07
      • 1970-01-01
      • 2018-04-07
      • 1970-01-01
      • 2017-05-01
      • 2012-03-16
      相关资源
      最近更新 更多