Question

所以，我目前正在使用react-router v2，如下所示：

import { IndexRoute, Router, Route, Redirect } from 'react-router';
import App from './components/App';
  ....
  render () {
    return (
      <ApolloProvider store={store} client={client}>
        <Router history={history}>
          <Route path="/" component={App}>
            <IndexRoute component={PhotoGrid} />
            <Route path="/view/:postId" component={Single}></Route>
            <Route path="/login" component={LoginUser}></Route>
          </Route>
        </Router>
      </ApolloProvider>
    )
  }
}

export default MainApp;

App.js

....
import Main from './Main';

const allPostsCommentsQuery = graphql(All_Posts_Comments_Query, {
  options: {
    cachePolicy: 'offline-critical', 
    fetchPolicy: 'cache-first',
  },
});

function mapStateToProps(state) {
   return {
    auth: state.auth
  };
}

export const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(actionCreators, dispatch);
}

export default compose(
  allPostsCommentsQuery,
  connect(mapStateToProps, mapDispatchToProps)
)(Main);

Main.js

class Main extends React.Component {

  constructor (props) {
    super(props);
  }
  
  componentWillMount () {
    if (!this.props.auth.token){
      this.context.router.push('/login');
    }
  }
  
  render () {
    return (
      <div>
        <h1>
          <Link to="/">Flamingo City</Link>
        </h1>
        { React.cloneElement(this.props.children, this.props) }
      </div>
    );
  }
}

Main.contextTypes = {
  router: function() { React.PropTypes.func.isRequired }
};

export default Main;

如何将当前的v2路由器转换为v4？我不清楚的是父嵌套元素：

<Route path="/" component={App}>

在所有v2中 - ＆gt;到目前为止我见过的v4转换示例，没有一个清楚地解释子元素会发生什么。我是否希望将子元素放在App.js组件本身中，如果是这样，在我的App.js版本中，如果Main.js实际发生任何导航的第一个迹象，它将如何工作？

Answer 1

在github上非常有用的帖子，你可以看到迁移到v4的所有重要部分。

source code

还解释了如何进行儿童路线。基本上，你应该在App.js中放置一个Match，这样这个父组件将负责它自己的子路由部分，依此类推每个父组件。

没试过，请告诉我它是怎么回事！

从React Router v2迁移到v4

1 个答案: