当我使用React-Router的Redirect时会引发webpack错误

Question

所以我正在编写一个React应用，基本上我正在尝试使用react-router-dom包从一个路径重定向到另一路径。但是，只要我的路径与Redirect元素的'from'属性匹配，就会出现webpack错误。这是我的代码：

import React, { Component } from "react";
import "./App.sass";
import HeaderComponent from "./HeaderComponent";
import BodyComponent from "./BodyComponent";
import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link,
    Redirect
} from "react-router-dom";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            increment: 0
        };

        this.parallax = this.parallax.bind(this);
    }

    componentDidMount() {
        window.addEventListener("scroll", this.parallax);
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.parallax);
    }

    parallax() {
        if (
            document.documentElement.scrollTop <
            document.getElementById("hero").clientHeight
        ) {
            let scrollTop = document.documentElement.scrollTop,
                offset = Math.floor(scrollTop / 3);
            this.setState({ increment: offset }, () =>
                console.log(this.state.increment)
            );
        }
    }

    render() {
        return (
            <Router>
                <div>
                    <HeaderComponent
                        increment={this.state.increment}
                        days={this.state.days}
                    />
                    <Switch>
                        <Redirect from="/calabar" to="/tokyo" />
                        <Route
                            path="/:city"
                            render={props => <BodyComponent {...props} />}
                        />
                    </Switch>
                </div>
            </Router>
        );
    }
}

export default App;

这是我收到的错误的屏幕截图：

编辑

当url设置为与重定向的“ from”属性不匹配的其他路径时，它可以正常工作，如下面的屏幕截图所示：

请问我做错了什么吗？还是可能是安装错误？还是来自react-router-dom本身的错误？

Answer 1

很明显，重定向对我来说对交换机不起作用。我至今不知道为什么。在放弃了React-Router几周之后，又回来尝试了重定向，却没有将其嵌套在Switch中。因此，实现我想要的目标的另一种方法是：

<Redirect from="/calabar" to="/tokyo" />
/**Longer list of Redirects**/
<Switch>
   <Route
      path="/:city"
      render={props => <BodyComponent {...props} />}
   />
   /**Extra Routes whose path only match the to attribute of the Redirects**/
</Switch>

尽管在API文档中，他们在交换机中嵌套了一个重定向，但是我不知道为什么在我尝试时它会引发错误。