Reactjs 如何防止在所有管线中渲染组件？

我是一个新的反应，并试图了解路由。我已经在我的

App.js

组件中定义了非常基本的路由

import React, { Component } from 'react';
import './App.css';
import { Switch, BrowserRouter, Route, Link } from 'react-router-dom'
import Header from './Routing/Header'
import Home from './Routing/Home'
import About from './Routing/About';
import Contact from './Routing/Contact';
import User from './Routing/User';
import FileNotFound from './Routing/FileNotFound';
import Game from './Components/Game'
class App extends Component {

  render() {
    return (
      <div className="App">
        <div>
          <BrowserRouter>
            <div>

              <Header />

              <Switch>
              <Route exact path="/" component={Home}/>
              <Route path="/about" component={About}/>
              <Route path="/contact" component={Contact}/>
              <Route path="/user" component={User}/>
              <Route component={FileNotFound}/>
              </Switch>
            </div>
          </BrowserRouter>

          <Game />

        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“react router dom”导入{Switch，BrowserRouter，Route，Link}
从“./Routing/Header”导入标头
从“./Routing/Home”导入主页
从“./Routing/About”导入关于；
从“./Routing/Contact”导入联系人；
从“./Routing/User”导入用户；
从“./Routing/FileNotFound”导入FileNotFound；
从“./Components/Game”导入游戏
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

组件负责呈现导航栏。正如您所注意到的，

App.js

组件正在呈现一个

组件。虽然我已经定义了路由，但它在所有组件上返回渲染。 我的问题是:

如何防止游戏组件在其他组件上渲染 在路线中定义

---

我在这个方法中缺少了什么？或者有没有比我现在使用的方法更好的方法。

您不是在路由

游戏

，您应该将它放在一个路由组件中，或者为它创建一个路径，否则在渲染应用程序时将始终渲染：

 <BrowserRouter>
    <div>

      <Header />

      <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
      <Route path="/user" component={User}/>
      <Route path ='/game'component={Game}/>
       <Route component={FileNotFound}/>
      </Switch>
    </div>
  </BrowserRouter>

要在何处渲染

，在哪个组件中？取决于要渲染的条件。从所提供的信息中了解的信息不足您的

组件就像您的方法中的一个页脚。放置在布线组件外部的任何内容都将在所有布线中渲染。如果您想在应用程序的某些部分专门显示

组件，请将此组件直接放置到其他指定组件上，或为此组件单独布线。@MalikAwan谢谢，我理解。这很简单。meThat的愚蠢意味着，我应该将其添加到组件或路径中。我明白了，谢谢你的回答。很乐意帮忙。欢迎来到StackOverflow谢谢。我还需要问这个问题。添加路由是正确的方法还是有更好的方法呢？我读过很多不同方法的文章，有些在

Index.js

中定义了路由，有些在

中映射了

没有正确的方法，一切都取决于您的用例。明确地说，定义许多路线没有坏处。