React 路由

时间:2019-07-20
本文章向大家介绍React 路由,主要包括React 路由使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

React路由

  • 首先需要安装 yarn i react-router-dom

引入模块

  • Router 表示一个路由规则,在Router上,有两个比较重要的属性, path 和 component

  • Link 表示一个路由的链接,就好比vue中的 <router-link to= ""></router-link>

  • HashRouter 表示一个路由的根容器,将来,所有的路由相关的东西,都要包裹在HashRouter 里面,而且一个网站中,只需要使用一次HashRouter就行了。

  • import { HashRouter, Route, Link } from 'react-router-dom'
    import Home from './components/home.jsx'
    import Movie from './components/movie.jsx'
    import About from './components/about.jsx'
    
    export default class App extends React.Component {
      constructor() {
        super()
        this.state = {
    
        }
      }
    
      render () {
        return <HashRouter>
          <div>
            <h1>这是网站根目录</h1>
            <Link to='/home'>首页</Link>-
            <Link to='/movie'>电影</Link>-
            <Link to='/about'>关于</Link>
            <hr />
            <Route path='/home' component={Home}></Route>
            <Route path='/movie' component={Movie}></Route>
            <Route path='/about' component={About}></Route>
          </div>
        </HashRouter>
      }
    }

路由规则

  • Route 创建的标签,就是路由规则,其中path 表示要匹配的路由,component 表示要展示的组件

  • 在vue中有个 router-view 的路由标签,专门用来放置,匹配到的路由组件,但是在 react-router中,并没有类似这样的标签,而是直接在Route标签当作占位的坑

  • Route具有两种身份

    1. 它是路由匹配规则
    2. 它是占位符,表示将来要匹配到的组件都放到这个位置
  • 如果要匹配参数,可以在匹配规则中,使用 : 修饰符 表示这个位置匹配到的是参数

    • 如果要从路由规则中,提取匹配到的路由参数,有两种方式

    • this.props.match.params.***

    • this.state.routeParams.***

$flag 上一页 下一页