日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中前端路由的示例代碼_React

作者：weiweicn! ? 更新時間： 2022-06-16 編程語言

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

原文鏈接：https://blog.csdn.net/u014627255/article/details/124214269

欄目分類
最近更新