react 路由跳转传值及接参


const columns = [
            { title: '班级名称', dataIndex: 'className', key: 'className',align:'center'},
            { title: '学生人数', dataIndex: 'studentCount', key: 'studentCount',align:'center'},
            {
                title: '操作', dataIndex: 'classId', key: 'classId', align: "center",
                render: (text, record, index) => <div className='action vertical_j'>
                    <span onClick={()=>this.manageGrade(record)}>管理班级</span>
                    <span onClick={() =>this.renameGrade(record)}>重命名</span>
                    <span onClick={() => this.delClass(index, record.classId)}>删除 </span>
                </div>
            }
        ]

方法:

 //管理班级
    manageGrade = (record) => {
        this.props.history.push(`/main/training/trainingTeaching/manageGrade?${encodeURI(JSON.stringify(
            {classId: record.classId,className: record.className, courseInfo: this.state.courseInfo}))}`)
    }


//地址栏获取数据


  componentDidMount() {
        const data = this.props.location.search;  //地址栏截取
        if (data) {
            const param = data.split("?")[1];
            const codeParam = param && param.includes("%") ? decodeURI(param) : param;
            const jsonparam = JSON.parse(codeParam);
            this.setState({
                courseInfo: jsonparam.courseInfo,
                className: jsonparam.className,
                classId:jsonparam.classId,
                userInfo: JSON.parse(localStorage.getItem("userInfo"))
            }, () => {
                this.StudentList()
            })
        }

    }

 

React中,你可以使用React Router来进行路由跳转并传递参。以下是一种常用的方法: 1. 首先,确保你已经安装了React Router。你可以通过运行以下命令来安装它: ``` npm install react-router-dom ``` 2. 在你的应用程序中,导入`BrowserRouter`和`Route`组件: ```jsx import { BrowserRouter as Router, Route } from 'react-router-dom'; ``` 3. 使用`Router`组件包裹你的应用程序根组件,并在其中定义路由规则。例如,假设你要跳转到一个带有参的页面: ```jsx <Router> <Route path="/your-path/:param" component={YourComponent} /> </Router> ``` 上述代码中,`:param`表示参的占位符。 4. 在需要进行路由跳转的地方,例如一个按钮的点击事件中,使用`history.push()`方法来跳转到指定的路由并传递参: ```jsx import { useHistory } from 'react-router-dom'; const YourComponent = () => { const history = useHistory(); const handleButtonClick = () => { const paramValue = 'your-param-value'; // 替换为真实的参值 history.push(`/your-path/${paramValue}`); }; return ( <button onClick={handleButtonClick}>跳转带参</button> ); }; ``` 在上述代码中,`history.push()`方法接收一个字符串作为参,在路径中使用占位符来替换为实际的参值。 这样,当用户点击按钮时,路由跳转到指定路径,并且参将被传递到目标组件中。在目标组件中,你可以通过`props.match.params`来访问传递的参。 希望以上信息能对你有所帮助!如有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值