通过 React-router v4 更改组件

Question

大约一个月前我提出了一个类似的问题，这似乎解决了我所有的问题，但是我猜 react-router 版本改变了，现在都扔进了垃圾桶？因为现在 none 有效，而且根据我的研究，代码有一些相当大的变化。

我只想为一个简单的 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')
);

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

Cannot GET /page1

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

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

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

Answer 1

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

Answer 2

每当您说 path=/something 浏览器实际上尝试重定向到路径但失败时，这里有一些事情需要考虑，这是因为 server 无论您使用的是哪个服务器webpack-dev-server 或 express server 未获取文件。 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 后，您可以运行服务器，您的组件有望呈现。希望对你有帮助。

通过 React-router v4 更改组件

Changing a component via React-router v4

reactjs

react-router

react-router-v4

react-router-dom