ant design 后台模板 -2. 学习 react-router URL 参数

本贴最后更新于 2311 天前,其中的信息可能已经事过境迁

src 下创建文件夹 param,然后在 param 下创建 Users.js

import React from 'react'; class User extends React.Component{ render(){ return ( <div>{this.props.match.params.id}</div> ); } } export default User;

在 param 下创建 User.js

import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import User from './User'; class Users extends React.Component{ render(){ return( <Router> <div> <h2>Accounts</h2> <ul> <li><Link to="/netflix">Netflix</Link></li> <li><Link to="/zillow-group">Zillow Group</Link></li> <li><Link to="/yahoo">Yahoo</Link></li> <li><Link to="/modus-create">Modus Create</Link></li> </ul> <Route path="/:id" component={User}/> </div> </Router> ); } } export default Users;

修改 App.js

import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import BasicExample from './basic/BasicExample'; import Users from './param/Users'; class App extends Component { render() { return ( <Router> <div> <ul> <li><Link to="/baiscExample">基本使用</Link></li> <li><Link to="/users">参数传递</Link></li> </ul> <hr/> <Route path="/baiscExample" component={BasicExample}/> <Route path="/users" component={Users}/> </div> </Router> ); } } export default App;

效果如下

  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 381 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 3 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...