React Js：即使只有一个html文件，如何将路由反应到不同的页面？

Question

1. 内部如何做出反应？
2. 如何将路由符合正常的javascript？ （我没有在普通的javascript中看到任何路由库）

Answer 1

JavaScript可用于操作URL和本地页面历史记录而无需重新加载页面，这是React Router工作原理的主要思路（参见pushState）。将此与您可以选择性地使用JavaScript显示/隐藏内容并使用React Router这一事实相结合。例如：

js（带有一些jQuery语法糖）

function toggle() {
    $('#blockOne').toggleClass('hidden');
    $('#blockOne').toggleClass('visible');

    $('#blockTwo').toggleClass('hidden');
    $('#blockTwo').toggleClass('visible');
}

CSS

.hidden { display: none }
.visible { display: block }

HTML

<div id="blockOne">First content</div>
<div id="blockTwo" class="hidden">Second content</div>

<button onclick="toggle()">Toggle</button>

单击该按钮将导致第一个和第二个块切换其可见性。当然，React Router有点复杂，但这是基本的想法。浏览器历史记录操作+使用JS显示/隐藏内容。