React-router-dom 不工作

Question

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

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

如果我在第一个 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 有时会出现在我的控制台中：

Failed to load resource: the server responded with a status of 404 (Not Found)

它主要指的是 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 组件时，它会查看列表中的第一条（上方）路由并检查它是否符合条件。所以第一条 / 路线匹配，我们继续 'Sky' comp.

现在，当您寻址 /hq 时，Switch 组件会像以前一样查看第一个（上方）路由。匹配吗？ YES 第一条路线 / 匹配 /hq 这就是为什么我们还在 'Sky' 页面上。

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

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

404 可能是关于不存在的 favicon 图标的错误...

React-router-dom 不工作

React-router-dom not working

javascript

reactjs

react-router

react-router-dom