Reactjs 如何防止在每个页面上呈现主元素？

在我的家庭课上，我有一个Hello，每次我更改选项卡时，Hello总是被呈现出来。我怎样才能防止这种情况？我没有在其他选项卡中包含任何Hello字段，这很奇怪

import React, { Component } from 'react';

export default class Home extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h3>Hello</h3>
    )
  }
}

import React，{Component}来自'React'；
导出默认类Home extends组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
你好
)
}
}

导入“bootstrap/dist/css/bootstrap.min.css”；
从“react Router dom”导入{BrowserRouter as Router，Route，}
从“/components/App/NotFound”导入NotFound；
从“./components/Home/Home”导入Home；
从“/components/Navbar/Navbar”导入导航栏；
从“/components/Login/Login”导入登录名；
从“/components/SignUp/SignUp”导入注册；
函数App（）{
返回(


);
}
导出默认应用程序；

react应用程序的图像，

---

嘿，你可能想这么做

<Route path="/" exact={true} component={Home}/>

2:

---

只使用一条

路线

。注意：您必须保持顺序

发生这种情况的原因是您将所有路由一起渲染。您应该在每条路线的路线组件内传递

exact

道具

 <Route exact path="/signup" component={SignUp}/>

请记住，路由的顺序也很重要，您可能希望在最后渲染根路由。对于后者，请不要忘记从react router dom导入

交换机

。

@user13883454 ur welcome:），请不要忘记标记为answer&upvote

<Route path="/" exact={true} component={Home}/>
<Route path="/login" component={Login}/>
<Route path="/signup" component={SignUp}/>

<Switch>
  <Route path="/" component={Home}/>
  <Route path="/login" component={Login}/>
  <Route path="/signup" component={SignUp}/>
</Switch>

 <Route exact path="/signup" component={SignUp}/>

  <Switch>
     <Route path="/" component={Home}/>
     <Route path="/login" component={Login}/>
     <Route path="/signup" component={SignUp}/>
</Switch>