React中的前端路由怎么用

這篇文章主要講解了“React中的前端路由怎么用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“React中的前端路由怎么用”吧！

一. url是什么

訪問不同url, 展示不同的組件

二. 使用步驟

安裝React路由：命令行中執(zhí)行npm install react-router-dom --save(注意此處的版本為npm install react-router-dom@4.3.1 --save)

兩個(gè)js文件，分別為list.js和newButton.js,要實(shí)現(xiàn)訪問localhost:3000/button的時(shí)候就顯示button.js；訪問localhost:3000/list的時(shí)候就顯示list.js。代碼如下：

list.js

import React, {Component} from "react";

import {List} from 'antd';

const data = [
    'aaa',
    'bbb',
    'ccc',
    'ddd'
]
class List extends Component {
    render() {
        return (
            <List style={{marginLeft: 20,
            marginTop: 20,
            marginRight: 20}}
            header={<div>Header</div>}
            footer={<div>Footer</div>}
            bordered
            dataSource={data}
            renderItem={item=>(<List.Item>{item}</List.Item>)}
            />
        )
    }
}

export default List

newButton.js

import React, {Component} from "react";

import {List} from 'antd';

const data = [
    'aaa',
    'bbb',
    'ccc',
    'ddd'
]
class NewList extends Component {
    render() {
        return (
            <List style={{marginLeft: 20,
            marginTop: 20,
            marginRight: 20}}
            header={<div>Header</div>}
            footer={<div>Footer</div>}
            bordered
            dataSource={data}
            renderItem={item=>(<List.Item>{item}</List.Item>)}
            />
        )
    }
}

export default NewList

在index.js中使用router
1)引入路由：import { BrowserRouter, Route, Link } from 'react-router-dom';
2)渲染BrowserRouter組件,其中包含一條條的路由

class Entry extends Component {
    render() {
        return (
            <BrowserRouter>
            <div>
            <Route path='/list' component={NewList}/>
            <Route path='/button' component={NewButton}/>
            </div>
            </BrowserRouter>
        )
    }
}

3）瀏覽器中輸入localhost:3000后，什么后沒顯示出來，因?yàn)榇藭r(shí)沒有匹配的路由

4）根據(jù)路由的配置，瀏覽器中輸入：localhost:3000/list就會顯示newList組件
輸入：localhost:3000/button就會顯示newButton組件

注：BrowserRoute表示定義一個(gè)路由，Route表示一個(gè)路由項(xiàng)，

5）如想通過點(diǎn)擊newButton里的按鈕后跳轉(zhuǎn)到列表頁，需要用到Link（使用React路由后，就不能使用a標(biāo)簽進(jìn)行頁面跳轉(zhuǎn)，需要借助Link標(biāo)簽完成路由的跳轉(zhuǎn)）

步驟：在newButton中引入Link后用Link標(biāo)簽跳轉(zhuǎn)

newButton.js

import React, {Component, Fragment} from "react";
import { Link } from "react-router-dom";

import {Button} from 'antd';

class NewButton extends Component {
    render() {
        return (
            <Link to='/list'>
                <Button type="primary">按鈕</Button>
            </Link>
            
        )
    }
}

export default NewButton;

6)跳轉(zhuǎn)頁面的過程中，攜帶參數(shù)，如何獲取參數(shù)，如

class NewButton extends Component {
    render() {
        return (
            <Link to='/list/123'>
                <Button type="primary">按鈕</Button>
            </Link>
            
        )
    }
}

解決方式：在index.js配置路由部分，給list地址后加一個(gè)變量,表示傳過來的值為變量id的值

<Route path='/list/:id' component={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->NewList}/>

之后在newList組件中打印出console.log(this.props)

可看到params里有變量id的值為123

完整代碼如下：
index.js中

import React, {Component}from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import 'antd/dist/antd.css';
import NewList from './newList'
import NewButton from './newButton'

class Entry extends Component {
    render() {
        return (
            <BrowserRouter>
            <div>
            <Route path='/list/:id' component={NewList}/>
            <Route path='/button' component={NewButton}/>
            </div>
            </BrowserRouter>
        )
    }
}

// 將內(nèi)容掛載到頁面上
ReactDOM.render(<Entry />, document.getElementById('root'));

newList.js中

import React, {Component} from "react";

import {List} from 'antd';

const data = [
    'aaa',
    'bbb',
    'ccc',
    'ddd'
]
class NewList extends Component {
    render() {
        console.log(this.props)
        return (
            <List style={{marginLeft: 20,
            marginTop: 20,
            marginRight: 20}}
            header={<div>Header</div>}
            footer={<div>Footer</div>}
            bordered
            dataSource={data}
            renderItem={item=>(<List.Item>{item}</List.Item>)}
            />
        )
    }
}

export default NewList

newButton.js中

import React, {Component} from "react";
import { Link } from "react-router-dom";

import {Button} from 'antd';

class NewButton extends Component {
    render() {
        return (
            <Link to='/list/123'>
                <Button type="primary">按鈕</Button>
            </Link>
            
        )
    }
}

export default NewButton;

感謝各位的閱讀，以上就是“React中的前端路由怎么用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對React中的前端路由怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！