apollo+react实战项目 stepbystep（四 ）

router配合apollo一起使用

在hackernews-react-apollo文件夹下安装相关包：

yarn add react-router react-router-dom

　　

1、创建导航标题

import React from 'react';
import {Link} from 'react-router-dom';

export default class Header extends React.Component{
  render(){
    return(
      <div className="flex pa1 justify-between nowrap orange">
        <div className="flex flex-fixed black">
          <div className="fw7 mr1">
            <Link to='/' className="ml1 no-underline black">new</Link>
            <div className="ml1">|</div>
            <Link to='/create' className="ml1 no-underline black">submit</Link>
          </div>
        </div>
      </div>
    );
  }
}

　　

2、在App中使用Route来更新组件

import React, { Component } from 'react';
import {Route,Switch} from 'react-router-dom';
import Header from './Header';
import '../styles/App.css';
import LinkList from './LinkList';
import CreateLink from './CreateLink';

class App extends Component {
  render() {
    return (
      <div className="center w85">
        <Header />
        <div className="ph3 pv1 background-gray">
          <Switch>
            <Route exact path='/' component={LinkList} />
            <Route path='/create' component={CreateLink} />
          </Switch>
        </div>
      </div>
    );
  }
}

export default App;

　　

3、使用BrowserRouter包裹App，以便所有的子组件都可以获得routing的功能history,location，match等props。 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import {BrowserRouter as Router} from 'react-router-dom';



const client = new ApolloClient({uri:'http://localhost:4000'})


ReactDOM.render(
  <Router>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </Router>,  
  document.getElementById('root'));
registerServiceWorker();

　　

4、修改Mutation，当提交完成后自动导航到LinkList页面，即‘/’,可以使用ths.props.history.push('/')

        <Mutation
          mutation={POST_MUTATION}
          variables={{description,url}}
          onCompleted={()=>this.props.history.push('/')}
          >
          {
            postMutation=>(
              <button onClick={postMutation}>Submit</button>
            )
          }
        </Mutation>