Question

我有一个页面模板，其中包含许多不同的键，这些键用于以用户选择的语言显示文本。默认语言是英语，英语页面的相应URL是localhost:3000。用户可以选择通过单击按钮切换到西班牙语。当用户单击按钮以切换到西班牙语时，将调用history.push()函数。它使用给定的国家/地区代码更新URL，在这种情况下，URL变为localhost:3000/es。单击浏览器的“后退”按钮时，URL更改回localhost:3000，但视图仍为西班牙语。

我为此问题苦了一段时间，并尝试实现多种解决方案，其中包括：

使用WithRouter组件包装该组件；
使用Router组件将历史对象作为道具传递；
使用componentDidUpdate强制更新组件；
App组件中的呼叫分派；

我的index.js文件包含呈现AppWrapper组件的路由。 AppWrapper组件呈现App组件的子代I18nContextProvider组件。

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import App from './App';
import { I18nContextProvider, availableTranslationsEnum } from './languages/languageHandler';

const AppWrapper = (language) => (
  <I18nContextProvider language={language}>
    <App />
  </I18nContextProvider>
);

const appRoutes = (
  <BrowserRouter>
    <Switch>
      <Route
        path={`/${availableTranslationsEnum.spanish}`}
        render={() => AppWrapper(availableTranslationsEnum.spanish)}
        exact
      />
      <Route
        render={() => AppWrapper(availableTranslationsEnum.english)}
      />
    </Switch>
  </BrowserRouter>
);

ReactDOM.render(appRoutes, document.getElementById('root'));

I18nContextProvider组件在如下所示的languageHandler.js文件中定义。

//languageHandler.js
import React, { useReducer } from 'react';
import EN from './en.json';
import ES from './es.json';

const translations = {
  en: EN,
  es: ES,
};

const getTranslate = (langCode) => (key) => translations[langCode][key] || key;

export const availableTranslationsEnum = {
  english: Object.keys(translations)[0],
  spanish: Object.keys(translations)[1],
};

const setInitialState = (language) => {
  const defaultLanguage = availableTranslationsEnum.english;
  const siteLanguage = language || defaultLanguage;
  return {
    langCode: siteLanguage,
    translate: getTranslate(siteLanguage),
  };
};

export const I18nContext = React.createContext(setInitialState());

export const I18nContextProvider = ({ children, language }) => {
  const reducer = (action) => {
    switch (action.type) {
      case 'setLanguage':
        return {
          langCode: action.payload,
          translate: getTranslate(action.payload),
        };
      default:
        return { ...setInitialState(language) };
    }
  };

  const [state, dispatch] = useReducer(reducer, setInitialState(language));

  return (
    <I18nContext.Provider value={{ ...state, dispatch }}>
      {children}
    </I18nContext.Provider>
  );
};

App组件包含翻译键，看起来像这样。

//App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

import { I18nContext } from './languages/languageHandler';
import LanguageSelect from './components/LanguageSelect';

const App = () => {
  const { translate } = React.useContext(I18nContext);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <LanguageSelect />
        <p>
          {translate('edit_and_save')}
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {translate('learn_react')}
        </a>
      </header>
    </div>
  );
};

export default App;

App组件呈现LanguageSelect组件，看起来像这样。

//LanguageSelect.js
import React, { useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { I18nContext, availableTranslationsEnum } from '../languages/languageHandler';

const LanguageSelect = () => {
  const history = useHistory();
  const { langCode, dispatch } = useContext(I18nContext);

  const switchLanguage = (languageToSwitchTo) => {
    const dispatchType = 'setLanguage';
    dispatch({ type: dispatchType, payload: languageToSwitchTo });
    if (languageToSwitchTo !== availableTranslationsEnum.english) {
      history.push(`/${languageToSwitchTo}`);
    }

    if (languageToSwitchTo === availableTranslationsEnum.english) {
      history.push(`/`); //Default language
    }

  };

  if (langCode === availableTranslationsEnum.english) {
    return (
      <button onClick={() => switchLanguage(availableTranslationsEnum.spanish)}>Español</button>
    );
  }

  return (<button onClick={() => switchLanguage(availableTranslationsEnum.english)}>English</button>);
};

export default LanguageSelect;

我试图理解为什么URL更改了，但是组件保持原样。如果有人可以帮助我朝正确的方向推动我，将不胜感激。

Answer 1

使用react dev工具检查组件的道具和状态-无需更改，无需重新呈现。

您的reducer用于“事件” ...更改url（返回按钮）会导致属性更改，而不是操作分配。

<I18nContext.Provider>使用状态，而不使用道具-道具更改时保持不变，没有理由重新展示。

只需检查道具并更新渲染功能以了解道具更改。

Answer 2

将您的语言值添加到<BrowserRouter>组件的 basename 属性中，它将为您的所有路由创建基本路径。

const appRoutes = props => (
  <BrowserRouter basename={props.language}>
    <I18nContextProvider language={props.language}>
      <App />
    </I18nContextProvider>
  </BrowserRouter>
);

如果语言是英语，那么您的网址将是：

localhost:3000/en

对于您拥有的其他语言，基本名称也不会更改。由用户使用 push 功能

反应路由器更改网址，但上下文未更新

2 个答案: