react-router v2 - 替换 onEnter 不起作用答案

【问题标题】：react-router v2 - replace in onEnter doesn't workreact-router v2 - 替换 onEnter 不起作用
【发布时间】：2016-06-27 22:30:35
【问题描述】：

在我的应用中，我使用 react-router v2 - https://github.com/reactjs/react-router

onEnter 中的重定向有问题：

一些组件

static async onEnter({ flux }, nextState, replace, callback) {
    const token = flux.getStore('auth').getAccessToken();
    if (!token) {
        replace('/login');
        return callback();
    }
}

我正在使用服务器端渲染并使用了本指南 - https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md#async-routes，因为它说我也需要在客户端使用 match：

client.js

RouterMatch({history: browserHistory, routes: patchedRouteHooks(routes)}, (error, redirectLocation, renderProps) => {
    // renderProps are `undefined` when replace from onEnter hook
    ReactDOM.render(
        <Router {...renderProps} createElement={passFluxToComponent} />,
        mountNode,
    );
});

routes.js

const routes = (
    <Route path="/" component={AppHandler}>
        <Route path="/" component={AuthHandler}>
            <Route path="login(/)" component={LoginFormHandler} />
            <Route path="signup(/)" component={SignupFormHandler} />
            <Route path="resetpassword(/)" component={ResetPasswordFormHandler} />
            <Route path="changepassword(/)" component={ChangePasswordFormHandler} />
            <Route path="logout(/)" component={LogoutHandler} />
        </Route>

        <Route path="/" component={AppLayoutHandler}>
            <Route path="/" component={EnsureAuthHandler}>
                <Route path="me/favorites(/)" component={FavoritePropertiesHandler} />
                <Route path="me/settings(/)" component={UserSettingsHandler} />
                <Route path="dashboard(/)(:status)(/)" component={DashboardFlowHandler} />
                <IndexRoute component={DashboardFlowHandler} />
            </Route>

            <Route path="/s(/)" component={SearchResultsHandler} />
            <Route path="/user/:id(/)" component={UserDetailsHandler} />
            <IndexRoute component={EnsureAuthHandler} />
        </Route>

        <IndexRoute component={AppLayoutHandler} />
    </Route>
);

export default routes

patchRouteHooks.js

function patchRouteHooks (Route, patchData = {}) {
    const { props: { children, component } } = Route;

    function _patchChildren (children) {
        if (Array.isArray(children)) {
            return React.Children.map(children, ChildRoute => patchRouteHooks(ChildRoute, patchData));
        } else {
            return patchRouteHooks(children, patchData);
        }
    }

    return {
        ...Route,
        props: {
            ...Route.props,
            onEnter: component && component.onEnter && function (...args) {
                component.onEnter.call(null, patchData, ...args);
            },
            onLeave: component && component.onLeave && function (...args) {
                component.onLeave.call(null, patchData, ...args);
            },
            children: children ? _patchChildren(children) : null
        }
    };
}

export default patchRouteHooks;

在 onEnter 中替换后，我收到了 undefined 的 renderProps，这会导致控制台中出现警告并损坏应用程序：

任何建议我做错了什么？谢谢！

【问题讨论】：

使用hashHistory 而不是browserHistory。
你能发布你在 routes.js 中的内容吗？（如果您使用的是通用渲染，它是客户端和服务器的共享路由）

标签： javascript reactjs routing react-router server-rendering

【解决方案1】：

正如你所说，renderProps 是undefined。

我没有传递renderProps，而是做了一些大致适合你的事情： ReactDOM.render( <Router history={browserHistory} routes ={patchedRouteHooks(routes)} createElement={passFluxToComponent} />, mountNode, );

无法完全理解 match 异步执行的操作，并且没有它有一个功能完善的应用程序（带有服务器渲染），我只是停止使用它:)

您可以保留当前的实现（匹配）并将您的后备渲染包装在一个

if (redirectLocation) { ...my proposition } else { ...your implementation }

【讨论】：