Can't add prefixes to paths properly in React router

Question

I'm creating multi language app. I'm using : React Intl; React Router (latest v4); Redux.
Paths in my app are going to be depending on locale:

/ <-- default expecting this to be uk
/en
/ru
/news <-- uk
/en/news
/ru/news

If user has locale = en-US and enters localhost:8080 app redirects him to localhost:8080/en

If user has locale = uk and enters localhost:8080 app shows him component that corresponds to address localhost:8080/ without changing location path-name.

Routers.jsx

const Routes = ({ lang }) => (
  <BrowserRouter basename={lang}>
      <Route render={props => <Header {...props} />} />
      <Switch>
        <Route exact path={`/:${lang}`} component={Landing} />
        <Route exact path={`/:${lang}/news`} component={News} />
        <Route component={FourOhFour} />
      </Switch>
  </BrowserRouter>
);

const mapStateToProps = state => ({ lang: getLang(state.locale) });    
export default connect(mapStateToProps)(Routes);

Currently It's not working as expected.
I got no match in routes config if I enter localhost:8080/ or localhost:8080/en.

Answer 1

Here's my way of solving it. Redirecting is working, and prefixes are added to props.

Routers.jsx

const Routes = ({ lang }) => (
  <BrowserRouter>
    <Route render={props => <Header lang={lang} {...props} />} />
    <Switch>
      <RootRouter
        exact
        path={'/:lang(en|ru)?'}
        lang={lang}
        component={Landing}
      />
      <Route
        exact
        path={'/:lang(en|ru)?/news'}
        render={props => <News {...props} lang={lang} />}
      />
      <Route component={FourOhFour} />
    </Switch>
  </BrowserRouter>
);

const mapStateToProps = state => ({ lang: getPrefix(state.locale) });
export default connect(mapStateToProps)(Routes);

RootRouter.jsx

const RootRouter = ({ component: Component, exact, path, lang }) => (
  <Route
    exact={exact}
    path={path}
    render={(props: ContextRouter) =>
      props.location.pathname === '/' && lang !== '' ? (
        <Redirect to={`/${lang}`} />
      ) : (
        <Component {...props} lang={lang} />
      )}
  />
);

Method from header component (Contacts.jsx) that changes locale on Click event:

const changeLang = newLang => () => {
  if (lang !== newLang) {
    const newUrl = switchLangHepler(lang, newLang, location.pathname);
    setLocaleData(newLang);
    localStorage.setItem('lang', String(newLang));
    history.replace(newUrl);
  }
};

Answer 2

A changeLanguage function with react-router:

  changeLanguage(lang) {

    // Get the path without the language path
    const oldPath = this.props.location.pathname.replace("en/", "").replace("fr/", "")
    // new path, with the /en path (if english is asked)
    const newPath = lang === "en" ? "/en" + oldPath : oldPath

    this.setState({
      redirect: newPath
    })
 
    // Change the language
    i18n.changeLanguage(lang)
  }

In the render method:

  render() {

    const redirect = this.state.redirect ? <Redirect to={this.state.redirect} /> : null

    return (
      <UncontrolledDropdown>
        {redirect}
        <DropdownToggle nav caret>
        {this.props.lang === 'fr' ? "FR" : this.props.lang === 'en' ? "EN" : ''}
        </DropdownToggle>
        <DropdownMenu right>
          <DropdownItem onClick={() => this.changeLanguage("fr")} >
            Français
          </DropdownItem>
          <DropdownItem onClick={() => this.changeLanguage("en")}>
            English
          </DropdownItem>
        </DropdownMenu>
      </UncontrolledDropdown>
    )
  }
}