目录↑

react-router-dom学习笔记

By blockXun

安装

npm install react-router-dom --save-dev
react-router-dom会自动安装依赖react-router

创建路由

1. 创建router.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import App from "../view/App";
import Home from '../view/home';
import Detail from '../view/detail';
import Store from '../view/store';

const Router = (
    <BrowserRouter>
        <App>
            <Switch>
                <Route exact path="/" component={Home}></Route>
                <Route exact path="/detail" component={Detail}></Route>
                <Route exact path="/store/:id" component={Store}></Route>
            </Switch>
        </App>
    </BrowserRouter>
)

export default Router 

路由模式分为BrowserRouter (history模式) 和HashRouter (hash模式)

2. 入口JS文件修改

将入口js文件中的App改为router.js文件

import ReactDOM from 'react-dom';
import Router from "./router"

ReactDOM.render(
  Router, // 将默认的 <app /> 改为Router文件
  document.getElementById('root')
);

3. 路由容器

在页面中使用{this.props.children}显示路由容器

路由跳转

声明式导航

声明式导航写在dom中,<NavLink to="/xxx">跳转</NavLink>

  • 声明式导航NavLink会默认在编译时被转换成<a>标签
  • 通过activeClassNameactiveStyle={ {color: '#fff'} }属性可以设置标签在选中时的样式和名称,默认样式名称为active

编程式导航

用事件进行路由跳转

fun () {
    this.props.history.push("/xxx")
}

引入跳转

import { browserHistory } from "react-router";
browserHistory.push("/xxx");

路由传参

  1. /id 方式
// 路由中
...
<Route exact path="/store/:id" component={Store}></Route>
...

// 传参
this.props.history.push('/store/xxx')

// 取内容
this.props.match.params.id
  1. state方式
    // 路由中
    <Route exact path="/store" component={Store}></Route>
    

// 传参
this.props.history.push({
pathname: “/store”,
query: ‘bbb’
})

// 取内容
this.props.history.location.state


## 重定向

`Redirect` 重定向  
```jsx
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
...
<Redirect from="/" to="/film"></Redirect>
...

如果from匹配,则重定向到to页面

二级路由

<Route path="/detail" render={() => {
    return (<Detail>
        <Route exact path="/detail/store" component={Store}></Route>
    </Detail>)
}}></Route>