Question

im试图在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")
);

在<Link to="/log-in"></Link>中单击<Header />时，它会退出SPA并跳至/log-in页。

我在这里想念什么？

Answer 1

多次使用ReactDOM.render将创建彼此互不了解的单独实例source。

让我们继续进行一些调整，以使您的应用程序感觉更好：

App.js

import React from 'react';
import { Main } from './components';
const App = () => (
    <Main />
)

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

Main.js

import React from 'react';
import { Router, Route } from 'react-router-dom';
import { Header, Login, Register, Home } from './components'

const Main = () => (
 <Router>
    <React.Fragment>
      <Header />

      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />

      <Footer />
    </React.Fragment>
  </Router>
)

export { Main };

这样，我们实际上只渲染了一个实例。您的页眉/页脚将放置在路由器外部，因此，只要路由发生更改，它们都不会受到影响。请记住，这将带来挑战，例如，如果您想让标头突出显示哪个路由处于活动状态，则简单的方法是检查URL，因为它位于路由器外部且未从中接收道具。另外请注意，我们在这里使用<React.Fragment>，但是您可以自由使用<div>或其他任何您喜欢的东西。路由器只希望有一个孩子，因此，如果您不需要其他html元素，则可以使用一个片段！

React Router-当<link />不在同一组件中时，<route>不呈现

1 个答案: