javascript - 在 react-router-dom 中使用 BrowserRouter 的动态基名

Question

我在构建 Multi-Tenancy SaaS 解决方案时遇到了问题。对于每个租户，我希望他们使用一个子域，这样我就可以从 url 获取子域，调用 REST api 返回有关该租户的数据。

例如，

1. 管理员(完全是另一个应用程序 - 管理应用程序)创建一个域名为:tenant1 的租户。
2. 在我本地系统上的租户应用程序中，我能够转到 tenant1.localhost:3000。我得到了 url，并得到了域名。然后，我通过域调用以获取租户的主题(这存储在 localStorage 中)。

不幸的是，我们在我公司部署了 k8，所以我无法模仿这种行为。因此，devOps 团队建议我在上下文中使用子域，从而拥有 localhost:3000/tenant1。请记住租户是动态的，所以我尝试了这个:

<BrowserRouter basename={"/:tenant"}>
    <Switch>
        <Route exact path="/login" name="Login" component={Login} />
        <Route exact path="/set-password/:token" name="Set Password" component={SetPassword} />
        <PrivateRoute path="/" name="Default Layout" component={DefaultLayout} /> 
    </Switch>              
</BrowserRouter>

然而，上面的解决方案使我的 url 指向 localhost:3000/:tenant/login

请问我如何在路由器中使用动态基名，以便它可以接受:

localhost:3000/tenant1localhost:3000/tenant3localhost:3000/tenant2 等

它可以允许任何，我的应用程序处理输入的错误域

Answer 1

我终于用下面的代码使用了动态租户

class App extends Component {

    state = {
        domain: ""
    }

    componentWillMount () {
        const { domain } = this.state;

        const parsedData = window.location.pathname.split("/"); 
        let domain = parsedData[1];
        this.setState({ domain: domain })
        this.props.onGetTenant(domain);                
    }

    render () {
        const { domain } = this.state;

        return () {
             <BrowserRouter basename={"/"+domain}>
                <Switch>
                    <Route exact path="/login" name="Login" component={Login} />
                    <Route exact path="/set-password/:token" name="Set Password" component={SetPassword} />
                    <PrivateRoute domain={domain} path="/" name="Default Layout" component={DefaultLayout} /> 
                 </Switch>              
             </BrowserRouter> 
    }

const mapStateToProps = state => {
    const { tenant} = state;
    return { tenant};
};

const mapDispatchToProps = (dispatch) => {
    return {
        onGetTenant: bindActionCreators( tenantActions.get, dispatch)
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(App)