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

Question

我想知道如何在react中加载页面时将用户引导到正确的语言路径?

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

Answer 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文档和React Hooks文档中了解更多。

Answer 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>;
};