privateRoute 中的组件在页面重新加载之前不会呈现答案

【问题标题】：Component in privateRoute is not rendering until page reloadprivateRoute 中的组件在页面重新加载之前不会呈现
【发布时间】：2021-06-08 12:04:57
【问题描述】：

我需要根据分配的角色允许用户访问。允许的 url 列表在 privateRoute 的 'urls' 变量中获取。但是登录后不会直接加载列表。刷新页面后，它就可以正常工作了。

我在 App.js 中定义了如下路由：

export default class App extends Component {
    static displayName = App.name;

    constructor() {
        super();
    }

    render() {
        return (
            <Layout>
                <Route exact path='/' component={Login} />
                <Route exact path='/Logout' component={Logout} />
                <Route exact path='/Employee/AllEmployees' component={AllEmployee} />

                <PrivateRoute path='/Employee/Detail' authed={'/Employee/Detail'} component={EmployeeDetails} />
                <PrivateRoute path='/Employee/Detail/:empid' authed={'/Employee/Detail'} component={EmployeeDetails} />
            </Layout>
        );
    }
}

export const PrivateRoute = ({ component: Component, authed, ...rest }) => {
    let urls=[]
    fetch('api/Common/sessionStatus')
        .then(response => response.json())
        .then(data => {
            if (data == true) {
                fetch('api/Common/getScreens')
                    .then(response => response.json())
                    .then(result => {
                        urls= result;
                    });
            }
        });

    return <Route {...rest}
        render={props => {
            if (urls.find(x => x === authed)) {
                return <Component {...props} />
            }
            return <Redirect to={{ pathname: "/Employee/AllEmployees", state: { error: "Sorry! You don't have rights to access this page." } }} />
        }}
    />
}

我需要在登录后直接加载列表而不重新加载页面。我怎样才能做到这一点。

【问题讨论】：

也许你可以在登录后强制页面自动重新加载：window.location.reload();
我不想强制重新加载页面。

标签： javascript json reactjs routes

【解决方案1】：

您可能需要在 componentDidMount 中添加获取逻辑。你可以从这里的 reacthttps://reactjs.org/docs/react-component.html#componentdidmount 了解更多关于 componentDidMount 的信息

【讨论】：

一开始我是在componentDidMount()中写的。仍然没有直接加载列表。

【解决方案2】：

我建议你使用 react 状态管理

类似：


export const PrivateRoute = ({ component: Component, authed, ...rest }) => {
    const [urls, setUrls] = React.useState([]);

    React.useEffect(() => {
      fetch('api/Common/sessionStatus')
        .then(response => response.json())
        .then(data => {
            if (data == true) {
                fetch('api/Common/getScreens')
                    .then(response => response.json())
                    .then(setUrls);
            }
        });

   }, [setUrls]);

    ...
}

【讨论】：

代替urls= result --> setUrls(result)