React中前端路由的示例代碼

更新時(shí)間：2022年04月17日 12:12:17 作者：weiweicn!

本文主要介紹了React中前端路由的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一. 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;

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

您可能感興趣的文章: