React Router 条件路由输入URL/刷新触发重定向不生效问题

• 路由渲染逻辑存在时序差：初始渲染时configuration是构造函数中初始化的空实例，shouldRoute为默认假值，/my-company这类条件路由此时根本没有被渲染到Switch组件内
• 直接输入地址/刷新页面时，页面会重新初始化，第一次渲染就会触发路径匹配，匹配不到条件路由就直接命中底部的Redirect，等异步拉取完配置、setState触发重渲染时，页面已经跳转到/my-account了
• 点击Link跳转正常是因为此时页面已经初始化完成，异步配置早就拉取完毕，shouldRoute为真值，条件路由已经正常渲染，所以可以匹配到路径

你之前测试移除Redirect就正常，是因为首次渲染没有重定向逻辑触发跳转，等异步配置拉完重渲染时，条件路由已经生成，就能正常匹配路径了，但这种方案会丢失未识别路由的重定向能力，不推荐使用。

第一步：给状态新增加载标识，区分配置是否拉取完成

constructor(props: {}) {
    super(props);
    this.state = {
        configuration: new Configuration({}),
        // 新增加载状态，初始为true
        isConfigLoading: true
    }
}

第二步：拉取配置完成后更新加载状态

async componentDidMount() {
    // ...原有逻辑
    var configuration = await GetConfiguration();
    this.setState({ 
        configuration: configuration,
        // 配置拉取完成后标记加载结束
        isConfigLoading: false 
    });
    // ...原有逻辑
}

第三步：渲染时先判断加载状态，加载完成前不渲染路由和重定向逻辑，可搭配加载提示优化体验

render() {
    // 加载中先渲染加载状态，不触发路由匹配逻辑
    if (this.state.isConfigLoading) {
        return <div>配置加载中，请稍候...</div>
    }
    return (
        <Router>
            <Switch>
                <Route exact path="/my-account">
                    <div className='dw-side-menu'></div>
                    {/* 原有逻辑 */}
                </Route>
                {this.state.configuration.shouldRoute && <Route exact path="/my-company"><div>my company</div></Route>}
                {this.state.configuration.shouldRoute && <Route exact path="/user-management"><div>user management</div></Route>}
                <Redirect to="/my-account" />
            </Switch>
        </Router>
    )
}

内容的提问来源于stack exchange，提问作者kalbsschnitzel