react+apollo+prisma入门demo搭建—4、页面路由

根据HOW TO GRAPHQL官网的例子，做了些对最新版的改动，适合最新框架的学习。

本系列文章注重前端方面的开发，对于node方面的放在下一个系列。在此过程中有任何问题，都欢迎在评论中提问，会及时反馈

系列目录：

第一章. Frontend开始
第二章. Queries组件编写（Loading Links）
第三章. Mutations组件编写（Creating Links）
第四章. 页面路由
第五章. 身份验证

为了照顾更加全面的读者，我写的会尽量详细，熟练的开发者可进行快速选择性的阅读

页面路由

现在我们是时候使用react-router和Apollo配合来完成我们页面的导航了

准备工作

第一步先安装我们需要的依赖

yarn add react-router react-router-dom

Header组件编写

接下来我们需要创建一个Header组件，用户可以使用该组件在应用程序中跳转到不同页面。
在components文件夹中添加Header.js文件

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { withRouter } from 'react-router'

class Header extends Component {
  render() {
    return (
      <div className="flex pa1 justify-between nowrap orange">
        <div className="flex flex-fixed black">
          <div className="fw7 mr1">Hacker News</div>
          <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>
    )
  }
}

export default withRouter(Header)

这是一个两个Link用于在LinkList和CreateLink组件之间跳转的组件

设置路由

我们需要在App.js中配置不同的路由

import React, { Component } from 'react'
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 exact path="/create" component={CreateLink} />
          </Switch>
        </div>
      </div>
    )
  }
}

export default App

并在头部添加依赖

import Header from './Header'
import { Switch, Route } from 'react-router-dom'

现在，我们需要使用BrowserRouter包装App，以便App的所有子组件都可以访问路由功能。

打开index.js，更改下面片段

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

并为index.js添加依赖

import { BrowserRouter } from 'react-router-dom'

现在如果你运行项目的话，可以看到访问 http://localhost:3000/ 将渲染 LinkList ，访问 http://localhost:3000/create 将渲染CreateLink

使用路由

本节的最后，让我们来使用路由完成CreateLink到LinkList的自动跳转
打开CreateLink.js，升级Mutation组件

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

现在成功发送变更请求之后会自动跳转到LinkList页面了。尝试一下吧。

本节我们成功实现了页面的基本路由配置！马上开始下一步的旅程吧。

身份验证

本章项目github 分支地址

https://github.com/zust-hh/simple-hackernews/tree/Frontend-topic4