react-router 与 react-router-dom

最新推荐文章于 2024-08-05 09:48:06 发布

佑眼睛

最新推荐文章于 2024-08-05 09:48:06 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/elsakun/article/details/106769323

版权

本文介绍了react-router和react-router-dom的用法，包括通过<link>和<route>进行路由配置，使用route钩子函数onEnter和onLeave，以及不同类型的history。还详细讲解了react-router-dom中的BrowserRouter和HashRouter组件，以及NavLink和Switch的特性。

摘要由CSDN通过智能技术生成

react-router 与 react-router-dom

通过路由配置匹配URL来执行对应的代码。

react-router 用法

通过<link to= “home” > 和 <route path = " /home" component ={home}>来进行路由的跳转和匹配
例子
在组件中使用this.props.params获取路由传递的参数

import React from 'react'
import {
    Router, Route, Link } from 'react-router'

const App = React.createClass({
   
  render() {
   
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {
   this.props.children}
      </div>
    )
  }
})

const About = React.createClass({
   
  render() {
   
    return <h3>About</h3>
  }
}