Question

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

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'));

我希望在网址/我会看到第一个组件，而在任何其他网址，我会看到第二个组件。 NotFound部分显示了我对它的期望，但在/，我看到第一个组件，然后是第二个组件。 NotFound绝对不在我的Feedback文件中。如何正确使用路由器，以便只显示我想要的组件？

Answer 1

使用<Switch />包裹您的路线。

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch } 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">
        <Switch>
            <Route path="/" exact={true} component={Feedback}/>
            <Route path="*" component={NotFound}/>
        </Switch>
    </div>
  </BrowserRouter>
), document.getElementById('app'));

<Switch />到底做了什么？

它会呈现与该位置匹配的第一个孩子<Route>或<Redirect>。

source

Answer 2

RRv4实际上并不支持{p> path="*"。相反，没有路径属性的Route将始终匹配。将知识与Switch组件相结合，您将获得理想的结果。 Switch只会呈现第一个匹配的Route，因此我们的想法是，如果您的其他Route没有匹配，那么Route中的最后一个Switch组件将呈现。

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

为什么反应会立即显示我的所有组件？

2 个答案: