(五)最简单的React教程,开发自己的电影网站:给页面增加上路由

avatar

上一节我们把列表弄出来了,但还要展示详情呀,这时候就要用到路由了,这一节就来说一下路由的用法

安装

yarn add react-router-dom

修改App.js

import React, { Component } from 'react';
import TabBar from './TabBar';
import Detail from './Detail';
import { BrowserRouter as Router, Route } from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route exact path="/" component={TabBar} />
          <Route path="/detail/:url" component={Detail} />
        </div>
      </Router>
    );
  }
}

export default App;

说明

exact 表示匹配真实路径,如果不加这个 /xx 也会被匹配到 TabBar 上

对Item增加路由链接

Item.js

render() {
  return (
    <div>
      {
        this.state.list.map((value, index) => <div className="item" key={index}><Link to={`/detail/` + encodeURIComponent(value.url)}>{value.title}</Link></div>)
      }
    </div>
  );
}

通过 <Link to={/detail/+ encodeURIComponent(value.url)}>{value.title}</Link> 增加链接

总结

这样就大功告成了,比起vue,路由要简单的多了

本来想加上一个自动加载更多的功能,但是 react-infinite-scroller 就是不触发,也没找到哪的问题,啥时候弄出来了,我再更新,这个又没有vue里的加载更多组件好用,真是各有千秋呀

目前还没有回答,快来帮帮TA吧!
添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录