1

大约一个月前我提出了一个类似的问题，这似乎解决了我在这里的所有问题，但是我猜 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 的文档并尝试按照这里看到的方法进行操作，不幸的是这些路由仍然不起作用。

4

2 回答 2

1

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，您可以运行服务器，并且您的组件有望呈现。希望这对您有所帮助。

于 2017-05-03T05:51:33.743 回答
1

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

于 2017-03-27T22:54:16.123 回答