javascript - 通过 链接渲染其他组件

Question

在下面的示例中，我有两个功能组件，它们给出了作为单独页面的想法，当然，它们只显示不同的颜色 <div>盒子。

const Home = () =>
    <div style={{background:'red', height: 100, width: 100}}></div>;

const About = () =>
    <div style={{background:'blue', height: 100, width: 100}}></div>;

现在，如果我想创建一个链接到我网站的某些部分的导航栏 - 忽略 <a> 可能的错误使用链接，但它是为了表明我希望这些内容呈现网站的其他部分，作为单击 Navbar 的响应选项。

const Navbar = () =>
    <div>
        <a href='#'>Home</a>
        <a href='#'>About</a>
    </div>;

如果我有一个名为 App 的组件为我呈现不同的页面:

const App = () =>
    <div>
        <Navbar />
        // Render current page here; default is the `Home` component.
    </div>;

ReactDOM.render(<App />, document.getElementById('app'));

我如何主动更新我的 App组件根据链接或元素的点击呈现不同的页面，在我的Navbar中？

编辑: Soviut和 finalfreq ， 谢谢您的回答!我来自 Codecademy 的 ReactJS 类(class)，因此过渡到 Javascript 和 React 的“现实世界”有些困难，因为我必须学习 ES6，并且对大多数 JS 库一无所知。不管怎样，我很感激你们给我指出了react-router的方向。并给了我一个例子来说明如何在没有它的情况下实现我的目标。干杯。

Answer 1

这就是 react-router生来就是为了做这件事。

虽然不建议手动执行此操作，但它可以通过发出单击事件来调用从包含“页面”的父组件传递到其中的回调函数来工作。该回调将告诉父容器单击了哪个导航链接，并将决定显示哪个页面以及停止渲染哪个页面。