从React路由器V2.x转换到V4.x

在V4.x上更新React Router V2.x后，所有路由都转到主页面。从React路由器V2.x转换到V4.x

这里是2.x版的路线：

import {Router, Route, hashHistory } from 'react-router' 

const routes = <Route component={App}> 
    <Route path="/results" component={Results} /> 
    <Route path="/" component={Voting} /> 
</Route>; 

ReactDOM.render(
    <Router history={hashHistory}>{routes}</Router>, 
    document.getElementById('app') 
);

而且这些都是V4.x的路线：

index.jsx文件：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 
import App from './components/App'; 
import Voting from './components/Voting'; 
import Results from './components/Results'; 

const withAppLayout = Component => props => <App><Component {...props} /></App> 

const routes = <Switch> 
    <Route exact path="/" component={withAppLayout(Voting)} /> 
    <Route path="/results" component={withAppLayout(Results)} /> 
</Switch>; 

ReactDOM.render(
     <Router component={App}> 
      {routes} 
     </Router>, 
     document.getElementById('app') 
     );

App.jsx文件：

import React from 'react'; 
import {List} from 'immutable'; 

const pair = List.of('Trainspotting', '28 Days Later'); 

export default React.createClass({ 
    render: function() { 
     console.log(this.props.children); 
     return React.cloneElement(this.props.children, {pair: pair}); 
    } 
});

Voting.jsx文件：

import React from 'react'; 
import PureRenderMixin from 'react-addons-pure-render-mixin'; 
import Winner from './Winner'; 
import Vote from './Vote'; 

export default React.createClass({ 
    mixins: [PureRenderMixin], 
    render: function() { 
     return <div> 
      {this.props.winner ? 
          <Winner ref="winner" winner={this.props.winner} /> : 
          <Vote {...this.props} /> 
      } 
     </div>; 
    } 
});

Results.jsx文件：

import React from 'react'; 
import PureRenderMixin from 'react-addons-pure-render-mixin'; 

export default React.createClass({ 
    mixins: [PureRenderMixin], 
    render: function() { 
     return <div>Hello from results!</div> 
    } 
});

如何解决这个问题？

来源

2017-07-17 Raz Galstyan

有一件事是使用：

<Route exact path="/" component={withAppLayout(Voting)} />

确切将确保只有准确的路径是要匹配。但是如果你在其他人之后有了路径=“/”，其他人应该首先匹配。这是你使用的真实代码吗？

编辑：查看下面的完整版本。

import {BrowserRouter, Route, Switch} from 'react-router-dom' 

ReactDOM.render(
    <BrowserRouter> 
     <Switch> 
      <Route exact path="/" component={Voting} /> 
      <Route path="/results" component={Results} /> 
     </Switch> 
    </BrowserRouter>, 
    document.getElementById('app') 
);

然后，如果出现这种情况，您可以将开关部件移动到应用程序组件中。另外，如果你想使用哈希历史记录，你需要使用一个基本上初始化具有哈希历史记录的路由器的HashRouter。

来源

2017-07-17 19:53:51

是的，这是我使用的代码，添加确切的不起作用，'/ results'路径也转到主页面。 –

既然我们在这，使用BrowserRouter传递的历史不会被反正使用，它应该在控制台中打印一条警告。无论如何，我会删除它，因为它什么都不做。或者使用路由器，因为它是允许您提供自定义历史记录的路由器。另外，我总是用括号括住我的jsx，当它是多行时，也许只是试试以防万一，我们永远不知道！ –

此外，路由器没有组件道具，所以只是将其删除，这可能会导致您的问题，因为App组件也是由您的withAppLayout HOC返回的。 –

从React路由器V2.x转换到V4.x

回答

相关问题