Question

我一直在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：

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

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

HQ和设置都是非常简单的文件（用设置替换HQ，你有设置文件）

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路径匹配的第一条路由。您有三条路线：/，/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 错误可能是关于未显示的favicon图标...

React-router-dom无效

1 个答案: