Javascript 我应该将路由器组件中仅一起呈现的两个组件的状态放在哪里？

更新：我将我的解决方案放在底部

我有两个组件需要使用相同的道具，但它们只在应用程序组件中的react router中一起呈现。。。我唯一的选择是把国家维持在这个水平吗

基本上，只要点击组件a中的按钮，它就需要设置状态（使用作为道具提供的setState函数）。组件B需要能够使用此数据，但它也需要能够对其进行设置，因此它将接收两个道具：数据和设置状态函数

应用程序文件是通过React路由器共享的父文件。这个组件目前没有状态，我觉得把这个随机的小状态放在里面很奇怪

但我还在学习，所以也许这真的很普遍，我的直觉完全错误。在花了最后几个小时在谷歌上搜索之后，我想是时候引进专家XD了

编辑：

我还应该这样说：它们都充当容器/视图。它们当前仅在my App.js中呈现如下（编辑以消除噪音）：

App.js（用作我的路由器文件）：
函数App（）{
返回(
}/>
}/>
);
}
导出默认应用程序；

然后我有两个容器/视图组件文件

更新：

最后，我改变了文件的结构，因此我有了一个中间人容器。这就是我采用的结构：

App.js (main router):

function App() {

  return (
    <Switch>
      <Route path="/LandingRouteForThisSectionOfMyApp" render={ () => 
          <BothComponentsContainer/>
      }/>
    </Switch>
  );
}

//NOTE: There is no "exact" in the Route above. This is important here
//because there are 2 <Route>s using this route. If I wrote "exact" 
//at this point, then it wouldn't render the next one. 

//BothComponentsContainer.js (the head of the operation but 
//also the second router):

function BothComponentsContainer() {

  return (
    <Switch>
      <Route exact path="/LandingRouteForThisSectionOfMyApp" render={ () => 
          <ComponentA/>
      }/>

//NOTE: Component A is the landing component for this section. 
//Here, we need the "exact" keyword. I believe this is because 
//by the time the router gets here, I don't want anything else 
//to be rendered with this component.

      <Route exact path="/LandingRouteForThisSectionOfMyApp/ComponentB" render={ () => 
          <ComponentB/>
      }/>
    </Switch>
  );
}

App.js（主路由器）：
函数App（）{
返回(
}/>
);
}
//注：上述路线中没有“精确”的。这在这里很重要
//因为这条路线有两个。如果我写“准确”
//此时，它将不会渲染下一个。
//BothComponentContainer.js（操作负责人，但
//还有第二个路由器）：
函数bothComponentContainer（）{
返回(
}/>
//注：组件A是本节的平台组件。
//在这里，我们需要“精确”关键词。我相信这是因为
//当路由器到达这里的时候，我不想要别的了
//要使用此组件进行渲染。
}/>
);
}

---

有了这个结构，我现在可以将状态和逻辑放入BothComponentContainer。也许不是最优雅的解决方案，但它似乎正在发挥作用

如果应用程序非常大，您可以使用Redux；如果是中小型应用程序，您可以使用Contex Hook de react；如果您只想在组件之间共享状态，您可以通过道具来实现。我给你一个基本的例子

// File in Routers folder
const route = () => {
  <Router>
    <Switch>
      <Route path='/home' component={Home} />
    </Switch>
  </Router>
}

// File in Containers folder
const Home = () => {
  const [state, setState] = useState('')

  const handleState = (value) => {
    setState(value)
  }

  return (
    <div className='layout'>
      <ComponetA onHandleState={handleState} />
      <ComponetB onReadState={state} />
    </div>
  )
}

// Files in folder components
const ComponetA = ({ handleState }) => {
  return (
    <input placeholder='Search' onChange={(e) => handleState(e.target.value)} />
  )
}

const ComponetB = ({ state }) => {
  return <h1>result for {state}</h1>
}

//路由器文件夹中的文件
常数路由=（）=>{
}
//容器文件夹中的文件
常量Home=（）=>{
常量[状态，设置状态]=使用状态（“”）
常量handleState=（值）=>{
设置状态（值）
}
返回(
)
}
//文件夹组件中的文件
常数ComponetA=（{handleState}）=>{
返回(
handleState（e.target.value）}/>
)
}
const componeb=（{state}）=>{
返回{state}的结果
}

如果应用程序非常大，您可以使用Redux；如果是中小型应用程序，您可以使用Contex钩子反作用；如果您只想在组件之间共享状态，您可以通过道具来实现。我给你一个基本的例子

// File in Routers folder
const route = () => {
  <Router>
    <Switch>
      <Route path='/home' component={Home} />
    </Switch>
  </Router>
}

// File in Containers folder
const Home = () => {
  const [state, setState] = useState('')

  const handleState = (value) => {
    setState(value)
  }

  return (
    <div className='layout'>
      <ComponetA onHandleState={handleState} />
      <ComponetB onReadState={state} />
    </div>
  )
}

// Files in folder components
const ComponetA = ({ handleState }) => {
  return (
    <input placeholder='Search' onChange={(e) => handleState(e.target.value)} />
  )
}

const ComponetB = ({ state }) => {
  return <h1>result for {state}</h1>
}

//路由器文件夹中的文件
常数路由=（）=>{
}
//容器文件夹中的文件
常量Home=（）=>{
常量[状态，设置状态]=使用状态（“”）
常量handleState=（值）=>{
设置状态（值）
}
返回(
)
}
//文件夹组件中的文件
常数ComponetA=（{handleState}）=>{
返回(
handleState（e.target.value）}/>
)
}
const componeb=（{state}）=>{
返回{state}的结果
}

通常我会这样做，但它们永远不会一起渲染，它们需要有自己的路由。我编辑了上面的问题，以显示路由器，并澄清每个组件本身就是一个容器/视图。抱歉，我应该指定最初^ ^通常我会这样做，但它们永远不会一起渲染，它们需要有自己的路由。我编辑了上面的问题，以显示路由器，并澄清每个组件本身就是一个容器/视图。对不起，我应该先指定^ ^'