React-Router-URL参数

原创

杨不易呀

发布于 2023-10-01 08:03:48

2570

发布于 2023-10-01 08:03:48

文章被收录于专栏：杨不易呀

前言

React Router 是 React 应用中常用的路由管理库，而 URL 参数则是它的一个关键概念。URL 参数允许您在路由之间传递数据，从而使您的应用程序更灵活和交互性更强。

路由参数传递

URL 参数，例如：?key=value&key=value

更改 App.js 的 Home 组件的路由跳转规则：

import React from 'react';
import Home from './components/Home'
import About from './components/About'
import Other from './components/Other'
import User from './components/User'
import Login from './components/Login'
import Discover from './components/Discover'
import {NavLink, Route, Switch, withRouter} from 'react-router-dom';

class App extends React.PureComponent {
    render() {
        return (
            <div>
                <NavLink to={'/home?name=yangbuyiya&age=18'} activeStyle={{color: 'red'}}>Home</NavLink>
                <NavLink to={'/about'} activeStyle={{color: 'red'}}>About</NavLink>
                <NavLink to={'/user'} activeStyle={{color: 'red'}}>User</NavLink>
                <NavLink to={'/discover'} activeStyle={{color: 'red'}}>广场</NavLink>
                <button onClick={() => {
                    this.btnClick()
                }}>
                    广场
                </button>

                <Switch>
                    <Route exact path={'/home'} component={Home}/>
                    <Route exact path={'/about'} component={About}/>
                    <Route exact path={'/user'} component={User}/>
                    <Route exact path={'/login'} component={Login}/>
                    <Route path={'/discover'} component={Discover}/>
                    <Route component={Other}/>
                </Switch>
            </div>
        )
    }

    btnClick() {
        this.props.history.push('/discover');
    }
}

export default withRouter(App);

更改 Home.js 组件的内容，处理 URL 传递过来的参数：

import React from 'react';

class Home extends React.PureComponent {
    constructor(props) {
        super(props);
        let query = this.props.location.search.substring(1);
        query = query.split('&');
        let obj = {};
        query.forEach((item) => {
            let temp = item.split('=');
            obj[temp[0]] = temp[1];
        });
        console.log(obj);
    }

    render() {
        return (
            <div>Home</div>
        )
    }
}

export default Home;

路由参数(动态路由)，例如：/path/:key

更改 App.js:

<NavLink to={'/about/yangbuyiya/18'} activeStyle={{color: 'red'}}>About</NavLink>

更改 About.js:

import React from 'react';

class About extends React.PureComponent {
    constructor(props) {
        super(props);
        console.log(this.props.match);
        console.log(this.props.match.params);
    }

    render() {
        return (
            <div>About</div>
        )
    }
}

export default About;

对象

更改 App.js:

render() {
    const obj = {
        name: 'yangbuyiya',
        age: 18,
        gender: 'man'
    };

    return (
        <div>
            <NavLink to={'/home?name=yangbuyiya&age=18'} activeStyle={{color: 'red'}}>Home</NavLink>
            <NavLink to={'/about/yangbuyiya/18'} activeStyle={{color: 'red'}}>About</NavLink>
            <NavLink to={{
                pathname: '/user',
                search: '',
                hash: '',
                state: obj
            }}
                     activeStyle={{color: 'red'}}
            >
                User
            </NavLink>
            <NavLink to={'/discover'} activeStyle={{color: 'red'}}>广场</NavLink>
            <button onClick={() => {
                this.btnClick()
            }}>
                广场
            </button>

            <Switch>
                <Route exact path={'/home'} component={Home}/>
                <Route exact path={'/about/:name/:age'} component={About}/>
                <Route exact path={'/user'} component={User}/>
                <Route exact path={'/login'} component={Login}/>
                <Route path={'/discover'} component={Discover}/>
                <Route component={Other}/>
            </Switch>
        </div>
    )
}

更改 User.js:

constructor(props) {
    super(props);
    this.state = {
        isLogin: true
    }
    console.log(this.props.location);
    console.log(this.props.location.state);
}