React-router-dom 不工作

Question

我一直在关注ReactTraining.com上的这个视频，以在我的应用程序中设置 react-router-dom。

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

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

在我的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 都是非常简单的文件（用 Settings 替换 HQ，你就有了 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组件时，会像以前一样查看第一个（上部）路由。匹配吗？是第一条路线/匹配/hq这就是为什么我们仍然在“天空”页面上。

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

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

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