Javascript 有没有办法在新选项卡中打开react组件的相同实例？

我的主页上有一个复杂的react组件。我没有使用redux。单击一个按钮，我想在一个新选项卡中打开react组件的同一个实例以及一些新的道具。问题是我不知道如何保持它们的同步

假设我有一个处于组件状态的数组，并且我正在组件中显示数组的内容。现在，根据用户的输入，我将修改数组。我希望更新的数组也显示在新选项卡中打开的组件中

class App extends Component{
    constructor(props){
        this.state = {arr = []};
    }

    handleUserInput = arr => {
        //make changes to arr
        this.setState({ arr });
    };


    render(){
        return(
            // code to call this.handleUserInput()
            <button href="/newtab" target="_blank"> </button>
            {arr} //display the array here
            .......
        )
    }
}

类应用程序扩展组件{
建造师（道具）{
this.state={arr=[]}；
}
handleUserInput=arr=>{
//对arr进行更改
this.setState（{arr}）；
};
render（）{
返回(
//调用此的代码。handleUserInput（）
{arr}//在此处显示数组
.......
)
}
}

场景如下所示：

我将在我的主页上显示这个组件，在那里用户可以向组件输入一些内容，根据这些内容，组件状态下的arr将发生变化

当用户单击按钮时，应在新选项卡中打开相同的组件，其中url将以“/newtab”结尾

当两个选项卡都打开时，当用户在主页上向组件输入内容并触发arr中的更新时，我希望更新后的arr自动反映在“/newtab”中的组件中

我使用的反应路由如下：

const routing = (  
    <Router>  
        <Route exact path="/" component={App} />  //user inputs something on this instance of App and arr from this App instance will be updated
        <Route exact path="/newtab" component={App additionalProps={additionalProps} />  // I want the updated arr from the App instance on the main page to show up here.
    </Router>  
  )

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

const路由=（
//用户在此应用程序实例上输入一些内容，来自此应用程序实例的arr将被更新
//我希望主页上的应用程序实例中更新的arr显示在这里。
)
render（路由，document.getElementById（'root'）；

我清楚地理解，通过使用react router在新选项卡中打开组件的这种方法，我实际上是在新选项卡中打开应用程序组件的新实例，这使得主页上的应用程序组件和“/newtab”页面上的应用程序组件完全不相关

我想知道是否有办法在不同选项卡上的这两个组件之间共享状态。我在实现本地存储方法方面已经做了一半。 （或）

是否有办法使react router在新选项卡中打开应用程序组件的同一实例，以便只有一个实例？如果这是可能的，将新道具传递给在“/newtab”打开的组件会有任何问题吗

如果我使用redux，我的问题会得到解决吗

---

请让我知道，如果我不清楚任何地方，如果我可以提供更多的信息给你。非常感谢。

您对React的理解有点偏颇-您无法打开组件的“同一实例”，因为组件没有呈现到DOM中。组件被转换为HTML元素，所以两个不同的页面有两个不同的DOM元素——它们不能共享

您要做的是在两个选项卡之间共享状态

React不支持此功能，新选项卡是一个新应用程序，它是一个完全独立的实例

在同一浏览器中打开的应用程序的两个实例之间共享状态的唯一方法是使用第三方/外部API

例如，您可以将应用程序连接到浏览器的本地存储。这意味着应用程序的两个实例将共享相同的本地存储数据。注意这一点，因为您不能在本地存储中存储任何敏感数据（即用户详细信息、密码、银行详细信息、访问令牌），因为它容易受到XSS和其他攻击

---

关于如何做到这一点（作者使用了Redux）有很多问题，但我确信您不需要使用Redux来实现这一点。

“场景是这样的：“这是描述您想要做什么的一个良好开端。我建议你完全从用户的角度来改写它。例如，“用户可以输入一些东西…”就很好了。更详细地了解用户输入的内容。（我假设你在这里遗漏了一些你非常了解的细节，但没有在你给我们的帖子中分享。）另一方面，“基于状态中的arr”并没有描述用户的行为。这是关于代码中的技术细节。在这个层次上，你应该避免这样的细节。描述用户所做的事情和看到的结果。@roronoa如果我的回答对您有帮助，请将其标记为已接受，以便问题可以结束。