反应路由器dom不工作

Question

我一直在关注 ReactTraining.com 上的 this video，以便在我的应用中设置 react-router-dom。

似乎一切都按预期设置，但是当我点击不同的NavLinks 时，我的应用程序的内容由于某种原因没有改变。

如果我在第一个Route 路径中为任何其他组件（HQ 和Settings）存根{Sky}，它们会正确呈现。我知道文件正在正确加载。我不确定为什么内容没有改变。

在我的dependencies 中，我安装了"react-router-dom": "^4.1.1",。

我不确定我做错了什么，任何帮助将不胜感激。谢谢！

import React, { Component } from 'react';
import PropTypes from 'prop-types';

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

import Sky from './sky';
import HQ from './hq';
import Settings from './settings';

class Home extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Router>
                <section className="main-content">
                    <div className="menu-bar">
                        <NavLink to='/'>
                            <span className="logo" />
                        </NavLink>

                        <div className="nav">
                            <NavLink to='/'>Sky</NavLink>
                            <NavLink to='/hq'>HQ</NavLink>
                            <NavLink to='/settings'>Settings</NavLink>
                        </div>
                    </div>

                    <Switch>
                        <Route path='/' component={Sky} />
                        <Route path='/hq' component={HQ} />
                        <Route path='/settings' component={Settings} />
                    </Switch>
                </section>
            </Router>
        );
    }
};

编辑：这个 404 偶尔会出现在我的控制台中：

加载资源失败：服务器响应状态为 404（未找到）

它主要指的是 hq.js，但有时指的是 settings.js。两者都与 Sky 位于同一目录中，加载得很好

HQ 和 Settings 都是非常简单的文件（将 HQ 替换为 Settings 即可获得 Settings 文件）

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class HQ extends Component {
    render() {
        return (
            <div className='hq'>
                <h1>Welcome to HQ</h1>
            </div>
        );
    }
}

export default HQ;

Answer 1

Switch 组件选择了与 URL 路径匹配的第一个路由。你有 3 条路要走：/、/hq、/settings。当您寻址到 / Switch 时，组件会查看列表中的第一个（上部）路由并检查它是否符合条件。所以第一条/ 路线匹配，我们继续进行“天空”比赛。

现在，当您寻址 /hq Switch 时，组件会像以前一样查看第一个（上）路由。匹配吗？ YES 第一条路线/ 匹配/hq 这就是我们仍在“天空”页面上的原因。

为防止此类行为，请在 Route 组件上使用 exact 属性。像这样：

<Switch>
  <Route exact path='/' component={Sky} />
  <Route exact path='/hq' component={HQ} />
  <Route exact path='/settings' component={Settings} />
</Switch>

404 错误可能与不存在的图标图标有关...