首页 文章

当<Link>不在同一组件中时,React router - <Route />不会呈现

提问于
浏览
0

即时尝试在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 回答

  • 5

    多次使用 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 };
    

    所以这样,我们在路由器之外'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元素,你可以使用一个片段!

相关问题