{"id":13542015,"url":"https://react-guide.github.io/react-router-cn/","last_synced_at":"2025-04-02T09:33:10.481Z","repository":{"id":48665219,"uuid":"44372176","full_name":"react-guide/react-router-cn","owner":"react-guide","description":"React Router 官方文档中文翻译","archived":false,"fork":false,"pushed_at":"2021-07-15T07:25:13.000Z","size":737,"stargazers_count":570,"open_issues_count":7,"forks_count":143,"subscribers_count":31,"default_branch":"master","last_synced_at":"2024-12-28T17:13:24.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://react-guide.github.io/react-router-cn/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-guide.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-16T08:23:57.000Z","updated_at":"2024-12-27T11:29:30.000Z","dependencies_parsed_at":"2022-09-14T12:50:40.377Z","dependency_job_id":null,"html_url":"https://github.com/react-guide/react-router-cn","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-guide%2Freact-router-cn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-guide%2Freact-router-cn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-guide%2Freact-router-cn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-guide%2Freact-router-cn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-guide","download_url":"https://codeload.github.com/react-guide/react-router-cn/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246789005,"owners_count":20834213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T10:01:00.138Z","updated_at":"2025-04-02T09:33:10.130Z","avatar_url":"https://github.com/react-guide.png","language":null,"funding_links":[],"categories":["资源网站"],"sub_categories":["React.js"],"readme":"# [React Router 中文文档](https://github.com/react-guide/react-router-cn)\n\n\u003e 本文档是基于 React-Router 2.X 版本翻译。最新版变化较多，请访问[官方站点](https://reacttraining.com/react-router/web/guides/philosophy)，实在跟不上节奏啊😂😂\n\n在线 Gitbook 地址：http://react-guide.github.io/react-router-cn/\n\n英文原版：https://github.com/rackt/react-router/tree/master/docs\n\nReact Router 是完整的 React 路由解决方案\n\nReact Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。你第一个念头想到的应该是 URL，而不是事后再想起。\n\n**重点：这是 React Router 的 `master` 分支，其中包含了很多还没有发布的修改。如果要看到最新公布的代码，请浏览 [`latest` 标签](https://github.com/rackt/react-router/tree/latest)。**\n\n### 文档 \u0026 帮助\n\n- [API 文档与指南](/docs)\n- [Change Log](https://github.com/rackt/react-router/blob/master/CHANGELOG.md)\n- [Stack Overflow](http://stackoverflow.com/questions/tagged/react-router)\n- [Codepen Boilerplate](http://codepen.io/anon/pen/xwQZdy?editors=001) 用于反馈 bug\n\n**注意：** **如果你仍然使用的是 React Router 0.13.x，可以在 [the 0.13.x branch](https://github.com/rackt/react-router/tree/0.13.x) 找到 [文档](https://github.com/rackt/react-router/tree/0.13.x/docs/guides)。升级信息可以查看 [change log](https://github.com/rackt/react-router/blob/master/CHANGELOG.md)。**\n\n如果有疑问和技术难点，请到[我们的 Reactiflux 频道](https://discord.gg/0ZcbPKXt5bYaNQ46)或 [Stack Overflow](http://stackoverflow.com/questions/tagged/react-router) 提问。这里的 issue 是**专门**为反馈 bug 和新特性提出所设立的。\n\n### 浏览器支持\n\n我们支持所有的浏览器和环境中运行 React。\n\n### 安装\n\n首先通过 [npm](https://www.npmjs.com/) 安装：\n\n    $ npm install --save react-router\n\n然后使用一个支持 CommonJS 或 ES2015 的模块管理器，例如 [webpack](https://webpack.github.io/)：\n\n```js\n// 使用 ES6 的转译器，如 babel\nimport { Router, Route, Link } from 'react-router'\n\n// 不使用 ES6 的转译器\nvar ReactRouter = require('react-router')\nvar Router = ReactRouter.Router\nvar Route = ReactRouter.Route\nvar Link = ReactRouter.Link\n```\n\n也可以在 [unpkg](https://unpkg.com) 上构建 UMD 格式：\n\n```html\n\u003cscript src=\"https://unpkg.com/react-router/umd/ReactRouter.min.js\"\u003e\u003c/script\u003e\n```\n\n你可以在 `window.ReactRouter` 找到这个库。\n\n### 版本控制和稳定性\n\nReact Router 遵循语义化版本控制，并很好地诠释了它。我们希望 React Router 是一个稳定的依赖库，这样易于保持流行性。这是我们对你的应用的升级策略。\n\n假设我们目前是 1.0 版本：\n\n1. 2.0 完全向后兼容 1.0，所以你可以放心地升级，然后逐步更新你的代码。\n2. 所有在 1.0 被弃用的 API 都会在控制台以 warn 的形式打印出来，并链接到升级指南。\n3. 在 3.0 中将会完全移除 1.0 所弃用的东西。\n4. 3.0 将发布不早于 2.0 三个月后。最坏的情况是，给你一个新的 API，你需要花费 6 个月的时间去完美升级。\n5. 可以用 rackt/rackt-codemod 去自动升级你的代码\n\n\u003e 如果是完全向后兼容的，为什么这不是一个小版本呢？\n\n如果我们不提供向后兼容性，然后你就不会问这个问题 —— 升级后的应用将不可运行。这不是我们想要的结果，我们想要平稳地，逐步地升级。\n\n在实践中，这意味着你可以：\n\n1. 从 1.0 升级到 2.0，你的应用仍可以运行。\n2. 逐步更新你的代码到新的 API，在下一个版本发布之前，你有 3 个月的时间去完成。\n3. 运行 codemods 去处理自动运行 (2) 部分。\n4. 如果您的代码运行没有警告，你可以使用 3.0 版本重复这个列表\n\n### 这看起来像什么？\n\n```js\nimport React from 'react'\nimport { Router, Route, Link } from 'react-router'\n\nconst App = React.createClass({/*...*/})\nconst About = React.createClass({/*...*/})\n// 等等。\n\nconst Users = React.createClass({\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eUsers\u003c/h1\u003e\n        \u003cdiv className=\"master\"\u003e\n          \u003cul\u003e\n            {/* 在应用中用 Link 去链接路由 */}\n            {this.state.users.map(user =\u003e (\n              \u003cli key={user.id}\u003e\u003cLink to={`/user/${user.id}`}\u003e{user.name}\u003c/Link\u003e\u003c/li\u003e\n            ))}\n          \u003c/ul\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"detail\"\u003e\n          {this.props.children}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n})\n\nconst User = React.createClass({\n  componentDidMount() {\n    this.setState({\n      // 路由应该通过有用的信息来呈现，例如 URL 的参数\n      user: findUserById(this.props.params.userId)\n    })\n  },\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch2\u003e{this.state.user.name}\u003c/h2\u003e\n        {/* 等等。 */}\n      \u003c/div\u003e\n    )\n  }\n})\n\n// 路由配置说明（你不用加载整个配置，\n// 只需加载一个你想要的根路由，\n// 也可以延迟加载这个配置）。\nReact.render((\n  \u003cRouter\u003e\n    \u003cRoute path=\"/\" component={App}\u003e\n      \u003cRoute path=\"about\" component={About}/\u003e\n      \u003cRoute path=\"users\" component={Users}\u003e\n        \u003cRoute path=\"/user/:userId\" component={User}/\u003e\n      \u003c/Route\u003e\n      \u003cRoute path=\"*\" component={NoMatch}/\u003e\n    \u003c/Route\u003e\n  \u003c/Router\u003e\n), document.body)\n```\n\n更多请看 [介绍](/docs/Introduction.md)、[高级用法](/docs/guides/advanced/README.md)和 [示例](https://github.com/rackt/react-router/tree/master/examples)。\n\n### 感谢\n\n感谢[我们的赞助商](https://github.com/rackt/react-router/blob/master/SPONSORS.md)对于 React Router 开发的支持。\n\nReact Router 灵感来源于 Ember's fantastic router。非常感谢 Ember 团队。\n\n同时，也感谢 [BrowserStack](https://www.browserstack.com/) 提供一个平台让我们能在真实的浏览器中运行我们的项目。\n\n\n**本文档翻译流程符合 [ETC 翻译规范](https://github.com/react-guide/ETC)，欢迎你来一起完善**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/react-guide.github.io%2Freact-router-cn%2F","html_url":"https://awesome.ecosyste.ms/projects/react-guide.github.io%2Freact-router-cn%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/react-guide.github.io%2Freact-router-cn%2F/lists"}