javascript - React-Router-dom不起作用

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

似乎一切都按预期进行了设置，但是当我单击不同的NavLink时，由于某些原因，我的应用程序内容不会更改。

如果我在第一个{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显示在我的控制台中:



它主要指的是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;

最佳答案

Switch组件选择了第一个与URL路径匹配的路由。您有3条路线可供选择:/，/hq和/settings。当您寻址/时Switch组件会查看列表中的第一条(上部)路线，并检查其是否符合条件。因此，第一个/路由匹配，然后我们进行“Sky”补偿。

现在，当您寻址/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 错误，可能与不存在的图标图标有关...

关于javascript - React-Router-dom不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45290822/