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后，什么后沒顯示出來(lái)，因?yàn)榇藭r(shí)沒有匹配的路由

在這里插入圖片描述

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

在這里插入圖片描述

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

5）如想通過(guò)點(diǎn)擊newButton里的按鈕后跳轉(zhuǎn)到列表頁(yè)，需要用到Link（使用React路由后，就不能使用a標(biāo)簽進(jìn)行頁(yè)面跳轉(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)頁(yè)面的過(guò)程中，攜帶參數(shù)，如何獲取參數(shù)，如

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

解決方式：在index.js配置路由部分，給list地址后加一個(gè)變量,表示傳過(guò)來(lái)的值為變量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)容掛載到頁(yè)面上
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;

到此這篇關(guān)于React中前端路由的示例代碼的文章就介紹到這了,更多相關(guān)React 前端路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: