Question

我正在尝试创建一个包含主页和另外两个页面的单页面应用程序。问题是主页没有消失＆＃34;当我点击带有react-router的链接时，新组件只会在现有组件See component rendered beneath the other component下面呈现。

两个链接的组件按预期工作 - 在单击适当的链接时，它们会替换其中一个。但是1）他们在他们甚至渲染之前创造了空白2）他们不会＆＃34;替换＆＃34;家庭组件。

我如何＆＃34;隐藏＆＃34;切换页面时的主页组件？这是我的代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Basics from './Basics';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './Home';


ReactDOM.render(
  <Router>
    <div>
      <Route path="/" component={Home}></Route>
      <Route path="/basics" component={Basics}></Route>
      <Route path="/flies" component={Flies}></Route>
    </div>
  </Router>, document.getElementById('root'));

registerServiceWorker();

Answer 1

有两个解决方案。

将您的/更改为exact，就像这样

<Route exact path="/" component={Home} />

或者，将/ Route移到列表中的最后一个

<Route path="/basics" component={Basics} />
<Route path="/flies" component={Flies} />
<Route path="/" component={Home} />

这些Route应位于Switch组件内，可从react-router获取。

Answer 2

我找到了答案。显然，用<div>替换<Router>中的<Switch>可以让每个组件一次一个地呈现。

  <Router>
    <Switch>
      <Route path="/" component={Home}></Route>
      <Route path="/basics" component={Basics}></Route>
      <Route path="/flies" component={Flies}></Route>
    </Switch>
  </Router>, document.getElementById('root'));

Answer 3

一个<Switch>组件通过其子<Route>来查找，呈现与当前URL匹配的第一个。

如果您有多条路线（在引擎盖下呈现 anchor 标签），则必须使用<Switch>来呈现其中一条根据算法匹配的路线， 反应路由器的情况下，它将呈现与当前URL最匹配的第一个。

您可以查看以下内容：https://reacttraining.com/react-router/web/guides/quick-start

REACT组件坚持页面？

3 个答案: