Question

所以我有一个无法解决的重大问题。基本上我有一个包含Home.jsx的React单页应用程序。所有状态，所有重要内容都在那里。但是，我最近发现，我需要第二个页面替换当前页面，就像第二个页面替换视图中的当前页面。

但是，我从来没有真正想到过我会需要这个，所以我所有的东西，都在我的Home.jsx文件中，所有状态和所有功能中，而不是在仅仅呈现应用程序的index.jsx中。

这就是问题所在。每个教程，每个视频，所有这些都假定您仅可以使用index.jsx并在那里配置路由。 我不能，因为要呈现的第二页需要传递道具，并且所有这些数据都位于Home.jsx中。

因此，我尝试通过从Home.jsx进行所有路由来解决此问题，但是我遇到了以下问题-根本不起作用，因为我认为我可以通过在Home内轻松完成此操作。 jsx文件：

<Route exact path="/" component={Home}/>

但是，这当然是我要输入的当前组件，所以我要告诉它进行渲染。这将导致我的应用程序永久加载，直到Chrome提示Aw，Snap！，这可能会变成无限循环。

所以，我的问题是，由于我无法在Home.jsx之上工作，因此我需要能够在Home.jsx的render函数中告诉它一条路由是Home.jsx本身，而下一条路线是Page2，但这对于Router似乎是不可能的。

路由器有办法吗？如果没有，还有其他办法吗？

Answer 1

因此，通常会有一个带有路由的App.js。

const App = () => (

    <Router>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/otherpage" component={OtherPage}/>
      </Switch>
    </Router>
)

如果无论何时都需要主页始终运行，则可以在主页内嵌套<Router>：

const Home = () => (
  <Router>
    <Switch>
      <Route exact path="/otherpage" component={OtherPage}/>
    </Switch>
  </Router>
)

确保在App.js中从路由中删除exact属性

请参见以下示例：https://stackblitz.com/edit/react-y9jeq9

最后，如果您希望将实际的本地逻辑分离出来，以免混淆路由器渲染的本地渲染，那么只需再添加一个包含路由并从应用程序加载的图层即可。然后，该层会加载本地路线和其他路线

类似这样的内容：https://stackblitz.com/edit/react-kyut2w?file=index.js

我该如何告诉React Router Route进行渲染……自己？

1 个答案: