Question

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

Answer 1

首先，您需要使用<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

的更多信息

Answer 2

您需要将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>

Answer 3

出现问题是因为与该位置匹配的所有Route组件都将呈现。为了呈现单个路线（第一个匹配），您需要将路线包裹在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>职责是在地点与路线的路径匹配时呈现一些用户界面。

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

详细了解React-Router's Switch

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

3 个答案: