在使用 React 加载页面时将用户定向到“/en/”或“/fr/”路径？答案

【问题标题】：Directing user to '/en/' or '/fr/' path upon loading page with React?在使用 React 加载页面时将用户定向到“/en/”或“/fr/”路径？
【发布时间】：2021-09-28 03:57:31
【问题描述】：

我想知道如何在加载页面时将用户引导到他们所在位置的正确语言路径？

我知道我可以使用 navigator.language 检测他们的本地化语言。但是，我如何使用它立即将它们路由到页面？

【问题讨论】：

我们的回答是否解决了您的问题？请现在让我们帮助您！ :)

标签： reactjs routes localization

【解决方案1】：

您可以在您的应用中拥有一个功能组件作为介绍组件，该组件将读取该位置并使用 useHistory 钩子将其路由到正确的语言，如下所示：

import { useHistory } from "react-router-dom";

function HomePage() {
  const history = useHistory();

  React.useEffect(() => {
    // Use navigator.language here
    history.push("/en"); 
  }, []);

  return (
    <div>
      Loading...
    </div>
  );
}

您可以随时在React Router docs 和React Hooks docs 中了解更多信息。

【讨论】：

【解决方案2】：

你应该阅读https://reactrouter.com/web/api/

navigator.language 返回浏览器的语言，我认为这是你真正想要的

我是用basename 做的，这是BrowserRouter 属性之一

import {
  BrowserRouter,
  NavLink,
  Redirect,
  Route,
  Switch
} from "react-router-dom";
import "./styles.css";

export default function App() {
  const lang = navigator.language.split("-")[0];
  return (
    <div className="App">
      <BrowserRouter basename={lang}>
        <Menu />
        <Switch>
          <Redirect exact from="/" to="/home" />
          <Route path="/" exact component={Home} />
          <Route path="/home" exact component={Home} />
          <Route path="/about" exact component={About} />
          <Redirect to="/home" />
        </Switch>
      </BrowserRouter>
    </div>
  );
}
export const Menu = () => {
  return (
    <>
      <NavLink to="./home">Home</NavLink>
      <span> / </span>
      <NavLink to="./about">About</NavLink>
    </>
  );
};
export const Home = () => {
  return <h1>Home</h1>;
};
export const About = () => {
  return <h1>About</h1>;
};

【讨论】：