Question

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

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

我正在尝试基于传递给Route的{{1}}道具来呈现一个记忆化的react question组件，如下所示：

Wizard

并将其呈现在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中看不到它。任何想法为什么以及如何解决这个问题？

Answer 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;

React Router备忘录路由向导

1 个答案: