Question

我是新来的反应者，试图理解路由。我在App.js组件中定义了非常基本的Route。

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;

<Header />组件负责呈现导航栏。如您所见，App.js组件正在渲染<Game />组件。尽管我已经定义了路线，但返回的结果将在所有组件上呈现。我的问题是：

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

这种方法我缺少什么？还是有比我现在正在使用的方法更好的方法。

Answer 1

您不是要路由Game，您应该将其放置在一个路由组件中，或者为其创建路径，否则将始终在呈现应用程序时呈现：

 <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>

如何防止所有路径中的组件渲染？

1 个答案: