react路由

-

react路由其实是借助BOM中的History对象实现的，专门有一个history.js的库，可以让操作history对象简单起来。

用history.js可以通过两种方式创建路由对象：

1、History.createBrowserHistory()   // 直接使用h5推出的history身上的api   （有些老的浏览器会不支持）

2、History.createHashHistory()  // 直接使用原生的 hash值（锚点） （所有浏览器都支持）

创建好的对象上有 push、replace、back、forward方法，可以操作路由

historyObj.listen( location => {  console.log(location) }); 监听路由变化

react路由的插件库是 react-router-dom

下面以react-router-dom@5实验

整个应用需要用一个路由器包裹，否则每个路由器中的路由是独立的

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'))

基本的路由配置

import React from 'react'
import { Link, Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import './App.css'

// 创建外壳组件App
class App extends React.Component {
  
  render() {
    return (
      <div className="container">
        <h1>react-router-dom-demo</h1>
        <div className="main">
          <aside className="aside">
            { /**
             * 编写路由链接
             * 在react中，靠路由连接切换组件
             */}
              <Link className="btn" to="/home">home</Link>
              <Link className="btn" to="/about">about</Link>
          </aside>
          <div className="content">
            {/**
             * 注册路由
             */}
              <Route path="/home" component={Home}></Route>
              <Route path="/about" component={About}></Route>
          </div>
        </div>
      </div>
    )
  }
}

export default App

-