react router源码（react 可以遍历输出 Route 吗）

本文目录

• react 可以遍历输出 Route 吗
• 为什么react-router中的link用不了

react 可以遍历输出 Route 吗

1：可以map输入，但是我不明白你想要用到哪里。

我写了一个例子。你可以看下：网页链接

import React from "react";import ReactDOM from "react-dom";import { BrowserRouter as Router, Route, Link } from "react-router-dom";import "./styles.css";var routers = ;function ParamsExample() {return (《Router》《div》《h3》Accounts《/h3》《ul》《li》《Link to="/a/a-router"》Netflix《/Link》《/li》《li》《Link to="/b/b-router"》Zillow Group《/Link》《/li》《li》《Link to="/c/c-router"》Yahoo《/Link》《/li》《/ul》{routers.map(item =》 (《Route path={`/${item.link}/:id`} component={Child} key={item.Link} /》))}《/div》《/Router》);}function Child({ match }) {return (《div》《h3》ID: {match.params.id}《/h3》《/div》);}function ComponentWithRegex({ match }) {return (《div》《h3》Only asc/desc are allowed: {match.params.direction}《/h3》《/div》);}function App() {return (《Router》《div className="App"》《h1》Hello CodeSandbox《/h1》《h3》Start editing to see some magic happen!《/h3》《ParamsExample /》《/div》《/Router》);}const rootElement = document.getElementById("root");ReactDOM.render(《App /》, rootElement);

为什么react-router中的link用不了

其实例子里的代码已经很老了，React Router 的 API 也发生了很多变化。因此今天抽出一晚上的时间，再以最新的 React Router 稳定版（截止 2015年08月18日21:23:40 为 v0.13.3 版，与 React 版本号一致）为基础讲讲如何使用 React Router。阅读本文需要你有一定的 ReactJS 基础，如果你正在寻找 ReactJS 中文入门教程，推荐我参与翻译的 React - 引领未来的用户界面开发框架 一书。快速上手一个最基本的页面，菜单有「图书」和「电影」两个菜单项，点击「图书」显示图书列表（链接变为/books），点击「电影」显示电影列表（链接变为/movies）。Demo说实话，这个例子并不简单。下面逐步分析一下用到的代码和它们分别是干什么的。var Router = ReactRouter; // 由于是html直接引用的库，所以 ReactRouter 是以全局变量的形式挂在 window 上var Route = ReactRouter.Route;var RouteHandler = ReactRouter.RouteHandler;var Link = ReactRouter.Link;var StateMixin = ReactRouter.State;由于 Demo 需要直接从网页上引用 React 和 React Router，因此它们都被挂在了 window 对象上（现在但凡有点追求的前端都上 webpack 了，但是例子的话大家就将就着看吧）。这几行就是获取 ReactRouter 提供的几个组件和 mixin。接下来声明了 4 个组件，都是最基本的只有 render 方法的 React 组件，分别是： Movies 电影列表 、 Movie 电影详情 、 Books 图书列表 、 Book 图书详情 。关于组件唯一需要说明的是用到了 ReactRouter 提供的 State 这个 mixin，主要功能就是让组件能够通过 this.getParams() 或 this.getQuery() 等方法获取到当前路由的各种值或参数。然后是应用的入口，也是我们渲染菜单的地方：// 应用入口var App = React.createClass({render: function() {return (《div className="app"》《nav》《Link to="movies"》电影《/Link》《Link to="books"》图书《/Link》《/nav》《section》《RouteHandler /》《/section》《/div》);}});这里用到了两个 ReactRouter 提供的组件： Link 和 RouteHandler 。***隐藏网址***此外，Link 组件还有一个小特点，就是如果这个 Link 组件指向的路由被激活的话，组件会自动添加一个值为 active 的 className，方便你对当前激活的菜单项设置不同的样式（注意 demo 中红色的菜单项）。而 RouteHandler 组件是 ReactRouter 的核心组件之一，它代表着当前路由匹配到的 React 组件。假设当前的路由为 /books ，那么 App 这个组件里的 RouteHandler 其实就是 Books 组件。那么这个关系是怎么得来的呢？就要看下面定义的页面路由了。// 定义页面上的路由var routes = (《Route handler={App}》《Route name="movies" handler={Movies} /》《Route name="movie" path="/movie/:id" handler={Movie} /》《Route name="books" handler={Books} /》《Route name="book" path="/book/:id" handler={Book} /》《/Route》);这里又出现了另外一个 ReactRouter 提供的组件 Route ，这个组件就是定义整个页面路由的基础，可以嵌套。Route 接受的 props 包括 name、path、handler 等等。其中 name 就是上文提到的路由名称，可以通过 《Link to="路由的名称"》 来生成一个跳转到该路由的链接。path 指明的是当前路由对应的 url，如果不指定，那么默认就是 name 对应的值；如果 name 也不指定，那默认是 / ，即根目录。另外 path 还支持指定 params（上文有提到），就是上面的例子中 : 及后面跟着的名称。params 和 query 的区别在于，params 定义的是「路由」中的参数，比如 /movies/:id ，params 为 id；而 query 是 「URL」中的参数，是跟在 URL 中「?」后面的。定义路由时一般不考虑也不能限制 query 会是什么。比如 《Route name="movies" handler={Movie} /》 就指明了一条指向 /movies 的路由，当该路由激活时，调用 Movies 这个组件进行渲染。接下来就是最后一步，根据上面定义的路由判断出当前该渲染哪个组件，并将其渲染到 DOM 中。// 将匹配的路由渲染到 DOM 中Router.run(routes, Router.HashLocation, function(Root){React.render(《Root /》, document.body);});Router 即 ReactRouter，run 方法接受 2 - 3个参数，其中第一个参数必填，即我们指定的路由规则。第二个参数选填，即路由的实现方式， Router.HashLocation 指明了当前页面使用 hash 变化来实现路由，反映在浏览器的地址栏中就是类似 xxx.com/#/movies 这样的地址。使用这种 Location 的好处是兼容 IE 8，如果你的应用不需要兼容 IE 8，可以使用更高级的 Router.HistoryLocation 。最后一个参数是一个回调函数，函数的第一个参数是 ReactRouter 判断出的当前路由中需要渲染的根节点组件，在这里就是 《App /》 这个组件（虽然名字叫做 Root，但在本例中 Root 指的就是 App）。