React中前端路由的範例程式碼

2022-04-17 19:00:23

一. url是什麼

存取不同url, 展示不同的元件

二. 使用步驟

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

兩個js檔案，分別為list.js和newButton.js,要實現存取localhost:3000/button的時候就顯示button.js；存取localhost:3000/list的時候就顯示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後，什麼後沒顯示出來，因為此時沒有匹配的路由

4）根據路由的設定，瀏覽器中輸入：localhost:3000/list就會顯示newList元件
輸入：localhost:3000/button就會顯示newButton元件

注：BrowserRoute表示定義一個路由，Route表示一個路由項，

5）如想通過點選newButton裡的按鈕後跳轉到列表頁，需要用到Link（使用React路由後，就不能使用a標籤進行頁面跳轉，需要藉助Link標籤完成路由的跳轉）

步驟：在newButton中引入Link後用Link標籤跳轉

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)跳轉頁面的過程中，攜帶引數，如何獲取引數，如

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

解決方式：在index.js設定路由部分，給list地址後加一個變數,表示傳過來的值為變數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>
        )
    }
}

// 將內容掛載到頁面上
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中前端路由的範例程式碼的文章就介紹到這了,更多相關React 前端路由內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

React中前端路由的範例程式碼

目錄

一. url是什麼

二. 使用步驟

熱門文章