如何在同一页面上使用不同数据更新当前路线

发布于 2025-02-14 01:07:36 字数 1172 浏览 0 评论 0原文

我有一条路线=“ /".fir.pirtly，当组件安装时，我想以英语显示该组件，而当用户单击不同的语言时，请例如，俄语，我希望使用route =“/”相同的组件。以俄罗斯语言展示。

我创建了根据国家 /地区更改语言的功能，当用户从下拉列表中单击俄罗斯语言时，这些功能将被调用。

这里的问题是状态正在更新，但目前的路线没有使用所选语言显示。我尝试过Windows.go（）和所有其他窗口方法，但仍然无法获得所需的结果。解决方案是什么？

constructor(props) {
    super(props);
    this.state = {
      Col: "white",
      TextCol: "black",
      Country: "ae",
      Link: "",
    };
  }

  ConInd = () => {
    this.setState({ Country: "in" });
    this.setState({ Link: "/" });
  };

 
  ConRus = () => {
    this.setState({ Country: "ru" });
    this.setState({ Link: "/" });
    
  };


// navbar 

<li><Link className="dropdown-item" onClick={this.props.ConInd} to={this.props.Currlink}>India</Link></li>
    
<li><Link className="dropdown-item" onClick={this.props.ConRus} to={this.props.Currlink}>Russia</Link></li>

// route 

<Route exact path="/">
              <News
                key="general"
                pageSize={this.props.pageSize}
                country={this.state.Country}
                category={"general"}
              />
            </Route>

原文

I have a route with path = "/".Firstly when the component mounts I want to display that component in English and when the user clicks the different language let's say, Russian, I want that same component with route = "/" to be displayed in the Russian language.

I have created the functions to change the language according to the country and these functions will be called when the user clicks the Russian language from the drop-down list.

The problem here is the state is getting updated but the current route is not getting displayed with the selected language. I have tried Windows.go() and all other window methods but am still not able to get the desired result.What's the solution?

constructor(props) {
    super(props);
    this.state = {
      Col: "white",
      TextCol: "black",
      Country: "ae",
      Link: "",
    };
  }

  ConInd = () => {
    this.setState({ Country: "in" });
    this.setState({ Link: "/" });
  };

 
  ConRus = () => {
    this.setState({ Country: "ru" });
    this.setState({ Link: "/" });
    
  };


// navbar 

<li><Link className="dropdown-item" onClick={this.props.ConInd} to={this.props.Currlink}>India</Link></li>
    
<li><Link className="dropdown-item" onClick={this.props.ConRus} to={this.props.Currlink}>Russia</Link></li>

// route 

<Route exact path="/">
              <News
                key="general"
                pageSize={this.props.pageSize}
                country={this.state.Country}
                category={"general"}
              />
            </Route>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深白境迁sunset 2025-02-21 01:07:36

我将为Route组件提供一个React键。 country状态将是一个很好的候选人，因为当语言更改时，密钥将在更改。当密钥更新路由组件将重新启动。

例子：

<Route key={this.state.Country} exact path="/">
  <News
    key="general"
    pageSize={this.props.pageSize}
    country={this.state.Country}
    category={"general"}
  />
</Route>

I would provide a React key to the Route component. The Country state would be a good candidate since the key would be changing when the language changes. When the key updates the Route component will remount.

Example:

<Route key={this.state.Country} exact path="/">
  <News
    key="general"
    pageSize={this.props.pageSize}
    country={this.state.Country}
    category={"general"}
  />
</Route>

回复收藏 0 原文

~没有更多了~