динамическое базовое имя с BrowserRouter в реакции-маршрутизатор-дом

Question

Пожалуйста, у меня проблема с созданием мультитенантного 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/tenant1 localhost:3000/tenant3 localhost: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)