Question

我在标题中创建了一个导航栏，但是当我单击链接时，它将在同一标题中呈现组件。所以我想在标题下渲染它。完成此操作的正确方法是什么？

import React, { Component } from "react";
import Nav from "./Nav";
import Home from "./Home";
import About from "./About";
import Events from "./Events";
var ReactRouter = require("react-router-dom");
var Router = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
var Switch = ReactRouter.Switch;

class Header extends Component {
  render() {
    return (
      <div className="header">
        <img src={require("./img/logo.png")} className="logo" alt="Logo" />
        <Router>
          <div className="container">
            <Nav />
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/about" component={About} />
              <Route exact path="/events" component={Events} />
              <Route
                render={function() {
                  return <p>Not Found</p>;
                }}
              />
            </Switch>
          </div>
        </Router>
      </div>
    );
  }
}

export default Header;

Answer 1

由于将路由放置在<div className="header"></div>标签之间，因此该路由显示在标头中。
编辑代码，使其看起来像这样：

// Imports

class Header extends Component {
  render() {
    return (
      <React.Fragment>
        <div className="header">
          <img src={require("./img/logo.png")} className="logo" alt="Logo" />
          <Nav />
        </div>
        <Router>
          <div className="container">

            <Switch>
              // Routes... 
            </Switch>
          </div>
        </Router>
      </React.Fragment>
    );
  }
}

React Router在nav之外渲染组件

1 个答案: