React-Router5

文档

router5.js.org

概念

本质上，React Router是当前位置或URL的状态容器。配合React使用。

安装

npm i react-router-dom react-router -s

⚠️注意

• react-router-dom 依赖react-router （相同版本即可）

针对新版本

官方给出最新版本的几个优点

• 更好的支持React16（React> = 15）
• 向后兼容低版本

新的功能

可以在中使用数组，例如想在两个不同路径使用相同组件。

// V4
<Switch>
  <Route path="/users/:id" component={User} />
  <Route path="/profile/:id" component={User} />
</Switch>

// V5
<Route path={["/users/:id", "/profile/:id"]} component={User} />

Hooks

• React Router附带了一些挂钩，可让您访问路由器的状态并从组件内部执行导航。
• useParams useHistory useLocation

属性	说明	类型	默认值
to	跳转	string/object/function	-
replace	如果为true，则单击链接将替换历史记录堆栈中的当前条目，而不是添加新条目	boolean	true
innerRef	访问组件所使用的ref	function/RefObject	-
others	想要传递的自定义参数	any	-

使用

基本使用

// routes.js
import React from 'react';
import {HashRouter,Switch，Route} from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';

const routes = (
    <Router >
        <Switch>
            <Route path='/' component={Home} />
            <Route path='/about' component={About} />
        </Switch>
    </Router>
)
export default routes

// app.js
import ReactDOM from 'react-dom';
import routes from './routes';
ReactDOM.render(routes, app);

useParams useHistory useLocation

• useParams是组件内几自组建都可获取组件所在的URL path
• useHistory是对历史对象的访问
• useLocation是返回当前的位置对象。包含pathname、search、hash、state等属性

// routes.js
import { Switch, useParams, HashRouter, BrowserRouter } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';

const routes = () => (
    // <HashRouter >
    //     <div>
    //         <Switch>
    //             <Route path="/about/:slug" component={About} />
    //             <Route exact path="/" component={Home} />
    //         </Switch>
    //     </div>
    // </HashRouter>
    // or
    <BrowserRouter>
        <Switch>
            <Route exact path="/" ><Home /></Route>
            <Route path='/about' ><About /></Route>
        </Switch>
    </BrowserRouter>
)
export default routes

// about.js
import React from 'react';
import { useParams, useHistory，useLocation } from 'react-router-dom';

function About() {
    let history = useHistory();
    console.log(useParams()); // 请求/about/1 则输出{slug: 1}
    console.log(history)); // 请求/about/1 则输出1
    console.log(useLocation()); // 请求/about/1 则输出1
    history.push('/'); // 路由跳转到首页
    return (
        <div>hhhbsdahkbdkhb</div>
    )
}
export default About

遇到的问题

配置routes.js项目运行报错

• 情况：请求http://localhost:8080/about 报错Cannot GET /about

<BrowserRouter>
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path='/about' component={About} />
    </Switch>
</BrowserRouter>

• 解决

// webpack.config.js
{
    devServer: {
        contentBase: path.join(__dirname, 'index.html'),
        port: '8080',
        open: true,
        inline: true,
        historyApiFallback: true,
    }
}

未完待续