当状态改变时，React-router-dom 不重新渲染切换答案

【问题标题】：React-router-dom not re rendering Switch when state is change当状态改变时，React-router-dom 不重新渲染切换
【发布时间】：2020-09-10 00:54:50
【问题描述】：

我在我的项目中使用 aws-amplify、react-hook。该应用程序有一些私有路由已定义如下：

const ProtectedRoute = ({render: C, props: childProps, ...rest}) => {  
    return (
        <Route
            {...rest}
            render={rProps =>
                (childProps) ? (
                    <C {...rProps} {...childProps} />
                ) : (
                    <Redirect
                        to={`/login?redirect=${rProps.location.pathname}${
                            rProps.location.search
                            }`}
                    />
                )
            }
        />
    );

}

在 App.js 中，我们改变 childProps 来定义用户是否登录。但是当 childProps 改变时，Switch 不会重新渲染。什么是强制 React 重新渲染其 Route 的方法，因为 isAuthenticated 是更改但 ProtectedRoute 不是重新渲染。

const [isAuthenticated, userHasAuthenticated] = useState(null);
    useEffect(() => {
        onLoad();
    }, []);


    async function onLoad() {
        try {
            let user = await Auth.currentSession();
            if (user.accessToken.payload) {
                userHasAuthenticated(user.accessToken.payload);
            }
        } catch (e) {
            if (e !== 'No current user') {
                alert(e);
            }
        }

    }
.....
 const childProps = isAuthenticated;
 return (
 <ApolloProvider client={client} >
            <div className="App">
                <BrowserRouter>
                    <Route path='/'>
                        <div>
                            <Switch>


                                <Route path='/login' render={props => <Login {...props}/>} exact/>
                                 <ProtectedRoute
                                    exact
                                    path='/admin/:name'
                                    render={()=> <Admin  />}
                                    props={childProps}
                                />



                                <Route path='/' render={props => <User {...props} />}/>

                            </Switch>
                        </div>
                    </Route>
                </BrowserRouter>
            </div>
        </ApolloProvider>)

【问题讨论】：

你在哪里检查childProps的值来改变做什么？
对不起。我上传旧代码。 childProps 是经过身份验证的。启动状态为空。如果为空，则重定向登录，否则呈现管理组件

标签： reactjs routes react-router-dom react-apollo aws-amplify

【解决方案1】：

只有当您再次输入该 URL 时，该路由才会再次呈现。您正在执行重定向，这意味着在身份验证完成后它将永远没有机会输入相同的 URL。您应该延迟渲染受保护的路由，直到您确认身份验证：

useEffect(() => {
    async function onLoad() {
        try {
            let user = await Auth.currentSession();
            userHasAuthenticated(!!user.accessToken.payload);
        } catch (e) {
            if (e !== 'No current user') {
                alert(e);
            }
        }

    }
    onLoad();
}, []);
...
const ProtectedRoute = ({render: C, props: childProps, ...rest}) => {  
    if (childProps === null) {
        // app still waiting authentication
        return 'Loading...';
    }

    return (
        <Route
            {...rest}
            render={rProps =>
                (childProps) ? (
                    <C {...rProps} {...childProps} />
                ) : (
                    <Redirect
                        to={`/login?redirect=${rProps.location.pathname}${
                            rProps.location.search
                            }`}
                    />
                )
            }
        />
    );
}

【讨论】：