Question

我在大约一个月前提出了类似的问题，这似乎解决了我所有的问题here，但是我想反应路由器的版本已经改变，现在已经全部变成垃圾了？因为根据我的研究，现在没有一个可行，代码有一些很大的变化。

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

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

无法GET / page1

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

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

编辑：我还应该提一下，我已经浏览了React Router的文档并尝试按照here的说法进行操作，不幸的是路由仍然不起作用。

Answer 1

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

Answer 2

每当你说cat "$WORKING_DIR/logs/$THE_PACKAGE/testResults.out" | \ "$WORKING_DIR/sendEmail.py" "$TEST_STRING, Tests passed" \ >& "$WORKING_DIR/logs/mailOut.txt"浏览器实际上尝试重定向到路径并且失败时，这里有一些事情需要考虑，这是因为path=/something你正在使用的服务器server webpack-dev-server 1}}或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更改组件

2 个答案: