反应路由器记忆路由向导答案

【问题标题】：React router memoized route wizard反应路由器记忆路由向导
【发布时间】：2019-06-16 11:17:20
【问题描述】：

我有一个向导组件，它围绕一个将问题保存在数组中并将当前问题传递给Wizard 组件的类构建。我希望每个问题都有对应的路线。数组内的问题对象：

            [{
                route: 'service-option',
                getComponent: props => {
                    return <QuestionOne {...props}/>;
                },
                ...
            },
            ...
            ]

我正在尝试根据传递给Wizard 的question 属性渲染一个记忆化的反应Route 组件，如下所示：

    const memoizedQuestionRoute = useMemo(() => {
        history.push(`wizard/${question.route}`);
        const component = React.cloneElement(question.getComponent(...), {...});
        return <Route path={`wizard/${question.route}`} render={props => component}/>;
    }, [question]);

并像这样在div 中渲染它：

<div>
    {memoizedQuestionRoute}
</div>

问题是路线甚至没有渲染，我在 div 中看不到它。任何想法为什么以及如何解决这个问题？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

如果你还没有决定。在组件中获取它。

import { __RouterContext as RouterContext } from 'react-router-dom';
import { useContext } from 'react';

/**
 * useRouter hook for react-router
 */
const useRouter = () => useContext(RouterContext);

export default useRouter;

【讨论】：