即时尝试在body标签中格式化我的HTML:
<header id="header"></header>
<main id="app"></main>
<footer id="footer"></footer>
原因是为了让我导航出 <main></main>
并在 <header></header>
我还单独渲染相应的React组件,即: document.getElementById("header")
, document.getElementById("app")
......:
ReactDOM.render(
<Header />,
document.getElementById("header")
);
单击 <Header />
中的 <Link to="/log-in"></Link>
时,它会跳出SPA并跳转到 /log-in
页面 .
我在这里缺少什么?
1 回答
多次使用
ReactDOM.render
将创建彼此不知道的单独实例source .让我们继续进行有关重组,以使您的应用感觉更好:
App.js
Main.js
所以这样,我们在路由器之外're ever only really rendering one instance. Your header/footer would be placed outside of the router, so whenever the route changes, they remain unaffected. Keep in mind that this will present a challenge, eg if you want your Header to highlight which route is active, the simples way, since it'并且在这里没有使用
<React.Fragment>
,但你可以自由地使用<div>
或其他你喜欢的东西 . 路由器只期望一个孩子,所以如果你不想要额外的html元素,你可以使用一个片段!