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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-Router 4默认路由内容显示在所有其他组件上[重复]相关的知识,希望对你有一定的参考价值。

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

我正在学习反应并尝试使用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();

enter image description here

答案

首先你需要使用<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的信息

以上是关于React-Router 4默认路由内容显示在所有其他组件上[重复]的主要内容,如果未能解决你的问题,请参考以下文章

我可以在 react-router 中设置基本路由吗

react-router 如何从数组生成路由?

react-router的使用——路由的嵌套

在 react-router v4 的嵌套路由中看到空白页

[react-router] React-Router 4怎样在路由变化时重新渲染同一个组件?

在 react-router v4 中将自定义道具传递给路由器组件