React-router的使用：標簽跳轉和編程式跳轉

目錄：

1、demo：NavLink 標簽跳轉

2、標簽渲染路由組件時，獲取url參數

3、編程式跳轉

 

參考文檔

　　1）https://reacttraining.com/react-router/web/guides/quick-start

　　2）http://react-guide.github.io/react-router-cn/index.html

 

1、demo：NavLink 標簽跳轉  <-- 返回

　　index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

import App from './components/App.jsx'

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

　　App.jsx

import React from 'react'
import { NavLink, Switch, Route, Redirect } from 'react-router-dom'

import About from '../views/about.jsx'
import Home from '../views/home.jsx'
import User from '../views/user.jsx'

export default class App extends React.Component {
    state = {
        user: {
            id: 1,
            name: 'zs'
        }
    }
    render() {
        const {user} = this.state
        return (
            <div>
                <h3>tab切換</h3>
                {/* 導航鏈接 */}
                <NavLink to='/about'>About</NavLink><br/>
                <NavLink to='/home'>Home</NavLink><br/>
                <NavLink to='/user/1'>User</NavLink>

                <h3>組件</h3>
                <Switch>
                    {/* <Route path='/about' component={About} />
                    <Route path='/home' component={Home} /> */}
                    <Route path='/about'><About /></Route>
                    <Route path='/home'><Home /></Route>
                    <Route path='/user/:id'><User user={user}/></Route>
                    <Redirect strict from='' to='/about' />
                </Switch>
            </div>
        )
    }
}

　　User.jsx

import React from 'react'

export default class User extends React.Component {
    render() {
        return (
            <div>
                user組件
                {this.props.user.id + "--" + this.props.user.name}
            </div>
        )
    }
}

　　about.jsx

import React from 'react'

export default class About extends React.Component {
    render() {
        return (
            <div>
                about組件
            </div>
        )
    }
}

 

2、標簽渲染路由組件時，獲取url參數  <-- 返回

　　2.1、使用this.props.match

<Route path='/user/:id' component={User}></Route>

　　使用這種標簽渲染路由組件時，獲取url參數：this.props.match.params.占位變量

const {id} = this.props.match.params
console.log(this.props)
console.log(`id=${id}`)

　　打印結果：

 　　

　　2.2、使用React Hook: useRouteMatch, useParams

<Route path='/user/:id'><User user={user}/></Route>

　　當這樣使用時，不能夠通過this.props.match.params.占位變量的方式來獲取url參數；此時可以使用useRouteMatch, useParams（配合function組件使用）

import React from 'react' import { useRouteMatch, useParams } from 'react-router-dom'

export default function User(props) {
    let match = useRouteMatch()
    console.log(match)

    let { id } = useParams()
    console.log(`path parameter id = ${id}`)

    return (
        <div>
            user組件
            {props.user.id + "--" + props.user.name}
        </div>
    )
}

 

 　　在非函數組件里使用React Hook，報錯：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

 

3、編程式跳轉  <-- 返回

　　3.1、對下面這樣注冊路由的方式，可以直接在路由組件中使用this.props.history.push('/路由')

<Route path='/user/:id' component={User}></Route>

　　3.2、<Route path='/home'><Home /></Route>這樣注冊路由的方式，父組件傳遞history給子組件使用

　　App.jsx

import React from 'react'
import { NavLink, Switch, Route, Redirect } from 'react-router-dom'

import { useHistory } from "react-router-dom";

import About from '../views/about.jsx'
import Home from '../views/home.jsx'
import User from '../views/user.jsx'

export default function App() {
    let history = useHistory();

    return (
        <div>
            <h3>tab切換</h3>
            {/* 導航鏈接 */}
            <NavLink to='/about'>About</NavLink><br />
            <NavLink to='/home'>Home</NavLink><br />
            <NavLink to='/user/1'>User</NavLink>

            <h3>組件</h3>
            <Switch>
                <Route path='/about'><About history={history} /></Route>
                <Route path='/home'><Home history={history} /></Route>
                <Route path='/user/:id'><User history={history} /></Route>
                <Redirect strict from='' to='/about' />
            </Switch>
        </div>
    )

}

　　user.jsx

import React from 'react'
import { NavLink, Switch, Route, Redirect } from 'react-router-dom'

import UserAdd from './UserAdd.jsx'
import UserList from './UserList.jsx'
import UserEdit from './UserEdit.jsx'

export default class User extends React.Component {
    render() {

        return (
            <div>
                user組件<br />
                {console.log(this.props)}

                {/* 導航鏈接 */} F
                <NavLink to='/user/list'>UserList</NavLink> <button onClick={this.listClickHandler}>to list</button><br />
                <NavLink to='/user/add'>UserAdd</NavLink> <button onClick={this.addClickHandler}>to add</button><br />
                <NavLink to='/user/edit/110'>UserEdit</NavLink> <button onClick={this.editClickHandler}>to edit</button>

                <h3>組件</h3>
                <Switch>
                    <Route path='/user/list'><UserList /></Route>
                    <Route path='/user/add'><UserAdd /></Route>
                    <Route path='/user/edit/:id'><UserEdit /></Route>

                    {/* <Route path='/user/list' component={UserList}></Route>
                    <Route path='/user/add' component={UserAdd}></Route>
                    <Route path='/user/edit/:id' component={UserEdit}></Route> */}
                    {/* <Redirect strict from='' to='/about' /> */}
                </Switch>

            </div>
        )
    }

    listClickHandler = () => {
        this.props.history.push('/user/list')
    }
    addClickHandler = () => {
        this.props.history.push('/user/add')
    }
    editClickHandler = () => {
        this.props.history.push('/user/edit/110')
    }
}

----