React-Router 4默认路由内容显示在所有其他组件上[重复]

Posted 2021-04-16

这个问题在这里已有答案：

• React Router v4 renders multiple routes 3回答

我正在学习反应并尝试使用react-router-dom设置路由。除默认路由外，所有路由都正常工作。当我导航到他们的路线时，默认路线组件的内容显示在所有其他组件上。这是下面的代码和输出

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import One from './one';
import Two from './two';
import Three from './three';
import FourOFour from './404';

import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter, Route} from 'react-router-dom';

ReactDOM.render(
<BrowserRouter>
    <div>
        <Route exact={true} path="/" component={App}></Route>
        <Route path="/One" component={One}></Route>
        <Route path="/Two" component={Two}></Route>
        <Route path="/Three" component={Three}></Route>
        <Route path="*" component={FourOFour}></Route>
    </div>
</BrowserRouter>, 
document.getElementById('root')
);
registerServiceWorker();

答案

首先你需要使用<Switch>并将它包裹在你的<Routes>周围

如Here所述

<Switch>的独特之处在于它专门提供了一条路线。相反，每个与位置匹配的东西都包含在内。

首先要确保在您的文件中导入Switch，如下所示：

import { Switch, Route } from 'react-router'

  <Switch>
    <Route exact={true} path="/" component={App}></Route>
    <Route path="/One" component={One}></Route>
    <Route path="/Two" component={Two}></Route>
    <Route path="/Three" component={Three}></Route>
    <Route path="*" component={FourOFour}></Route>
  <Switch>

所以你的代码应该像：

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Route } from 'react-router'; // Note this extra line
import './index.css';
import App from './App';
import One from './one';
import Two from './two';
import Three from './three';
import FourOFour from './404';

import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter, Route} from 'react-router-dom';

ReactDOM.render(
<BrowserRouter>
      <Switch> // Note this extra Line
        <Route exact={true} path="/" component={App}></Route>
        <Route path="/One" component={One}></Route>
        <Route path="/Two" component={Two}></Route>
        <Route path="/Three" component={Three}></Route>
        <Route path="*" component={FourOFour}></Route>
  <Switch>
</BrowserRouter>, 
document.getElementById('root')
);
registerServiceWorker();

您可以阅读更多关于<Switch > Here的内容

另一答案

你需要将你的Routes包裹在Switch中。一个Switch将匹配第一个Route并返回它。如果您不使用开关，就像您在此处所做的那样，它将渲染出与当前路径匹配的每条路径。

将其更改为：

<BrowserRouter>
    <Switch>
        <Route exact={true} path="/" component={App}></Route>
        <Route path="/One" component={One}></Route>
        <Route path="/Two" component={Two}></Route>
        <Route path="/Three" component={Three}></Route>
        <Route path="*" component={FourOFour}></Route>
    </Switch>
</BrowserRouter>

另一答案

出现问题的原因是所有匹配该位置的Routes组件都将呈现。为了渲染单个路径（第一个匹配），您需要将路径包装在Switch组件中。

---

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

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact={true} path="/" component={App} />
            <Route path="/One" component={One} />
            <Route path="/Two" component={Two} />
            <Route path="/Three" component={Three} />
            <Route component={FourOFour} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('app')
);

---

<Route>的职责是在位置与路径路径匹配时呈现一些UI。

<Switch>的独特之处在于它专门提供了一条路线。相比之下，与位置匹配的每个<Route>都包含在内。

了解更多关于React-Router's Switch的信息