Javascript 为什么react会同时显示我的所有组件？_Javascript_Reactjs_React Router

Javascript 为什么react会同时显示我的所有组件？

javascript reactjs

Javascript 为什么react会同时显示我的所有组件？,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我有一个简单的应用程序： import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter, Route } from 'react-router-dom'; import './css/hind.css'; import './css/splash.css'; import Feedback from './components/Feedback'; import NotFound f

我有一个简单的应用程序：

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';

import './css/hind.css';
import './css/splash.css';

import Feedback from './components/Feedback';
import NotFound from './components/NotFound';

render((
  <BrowserRouter>
    <div className="add-100 dark-background">
        <Route path="/" exact={true} component={Feedback}/>
        <Route path="*" component={NotFound}/>
    </div>
  </BrowserRouter>
), document.getElementById('app'));

从“React”导入React；
从'react dom'导入{render}；
从“react router dom”导入{BrowserRouter，Route}；
导入“./css/hind.css”；
导入“./css/splash.css”；
从“/组件/反馈”导入反馈；
从“/components/NotFound”导入NotFound；
渲染((
)，document.getElementById（'app'）；

我希望在url

上我会看到第一个组件，在任何其他url上，我会看到第二个组件。

NotFound

部分也显示了我所期望的效果，但在

处，我看到第一个组件，然后第二个组件显示在它下面<代码>未找到绝对不在我的

反馈

文件中。如何正确使用路由器，以便只显示所需的组件？

用

包装您的路由

从“React”导入React；
从'react dom'导入{render}；
从“react router dom”导入{BrowserRouter，Route，Switch}；
导入“./css/hind.css”；
导入“./css/splash.css”；
从“/组件/反馈”导入反馈；
从“/components/NotFound”导入NotFound；
渲染((
)，document.getElementById（'app'）；

到底做什么

它呈现与位置匹配的第一个子级

或

用

包装您的路线

从“React”导入React；
从'react dom'导入{render}；
从“react router dom”导入{BrowserRouter，Route，Switch}；
导入“./css/hind.css”；
导入“./css/splash.css”；
从“/组件/反馈”导入反馈；
从“/components/NotFound”导入NotFound；
渲染((
)，document.getElementById（'app'）；

到底做什么

它呈现与位置匹配的第一个子级

或

path=“*”

在RRv4中实际上不受支持。相反，没有路径属性的路由将始终匹配。将知识与

开关

组件相结合，您将获得所需的结果<代码>开关只会渲染第一条匹配的

路由

，因此，如果其他

路由

都不匹配，则

开关

组件中的最后一条

路由

将被渲染

   <Switch>
        <Route path="/" exact={true} component={Feedback}/>
        <Route component={NotFound}/>
    </Switch>

path=“*”