通过 React-router v4 更改组件

Question

大约一个月前我提出了一个类似的问题，这似乎解决了我所有的问题here，但是我猜 react-router 版本发生了变化，现在这一切都变成了垃圾？因为现在这些都不起作用，而且根据我的研究，代码发生了很大的变化。

我只想为一个简单的 webapp 做一些简单的路由，使用我之前线程中的相同示例，我目前有这个：

import {
  BrowserRouter as Router,
  Route, IndexRoute, Switch,
  Link
} from 'react-router-dom';
class Page1 extends Component{
  render(){
    return (<div>Page1</div>);
  }
}

class Page2 extends Component{
  render(){
    return (<div>Page222</div>);
  }
}

class Home extends Component {
    render(){
      return(<h1>I AM HOME</h1>);
    }
}
ReactDOM.render(
         <Router>
             <Switch>
             <Route exact path="/" component={Home}/>
            <Route exact path="/page1" component={Page1}/>
            <Route exact path="/page2" component={Page2}/>
             </Switch>
    </Router>,
    document.getElementById('root')
);

不幸的是，即使这样，我仍然无法在不同组件之间导航并不断收到消息

无法获取 /page1

我还注意到 this.props.children 似乎不再使用，或者至少不像以前那样工作了。

无论如何，我想要的只是能够在页面之间导航并适当地路由它们。我在这里做错了什么？

编辑：我还应该提一下，我已经阅读了 React Router 的文档并尝试按照 here 所见的那样进行操作，不幸的是路由仍然不起作用。

Answer 1

当你说path=/something浏览器实际上尝试重定向到路径并且它失败时，这里有一些事情需要考虑，这是因为server无论你使用的是webpack-dev-server或@987654324哪个服务器@没有得到文件。 React 基本上用于制作SPA 单页应用程序，因此最终您只提供index.html 的第一页。因此，当您点击url 时，您必须告诉服务器要提供什么服务。大多数情况下，您必须再次提供 index.html 或负责您的应用程序的任何页面。

如何解决：

如果您使用的是webpack-dev-server，并且您从与您的index.html 相同的目录运行它，您可以继续将--historyApiFallback 标志传递给webpack，如下所示：

$ webpack-dev-server --host 0.0.0.0 --historyApiFallback

你会看到它会回退到哪个位置。

更简洁的方法是将devServer 配置键放入您的webpack.config.js。这将是这样的：

 devServer: {
    historyApiFallback: {
      index: 'templates/index.html'
    },
  }

这里index.html 是从templates 目录提供的，您可以指定页面的路径。

将其放入您的webpack.config.js 后，您可以运行服务器，并且您的组件有望呈现。希望对您有所帮助。

Answer 2

这看起来像是 express.js 错误，而不是客户端错误。确保您的服务器为所有不匹配其他任何内容的 url 提供 index.html。