React-Router 4.2 的嵌套路由实现

React-Router的之前版本支持路由通过path和Route标签直接嵌套，看起来简洁明了，但是4之后的版本不支持了，原因据说是为了践行React的组件化理念，不能让Route标签看起来只是一个标签…。

//示例1、RR4之前的嵌套路由写法
import {Router,Route,IndexRoute,hashHistory
} from 'react-router';
import App from './views/App.js';
import Login from './views/Login';class MyMouter extends React.Component {render(){return(<Router history={hashHistory}><Route path="/" component={App}><IndexRoute component={Login}/><Route path="login" component={Login}/><Route path="userInfo" getComponent={pageFrame}><Route path="change" getComponent={userInfoChange}/></Route></Route></Router>  )}
}
export default MyRouter

既然不能使用Route嵌套，那该怎么办呢？由两种写法：

在component组件内部需要嵌套的位置直接嵌套Route标签
如示例1、RR4之前的路由嵌套写法，在component组件中需要使用this.props.children来表示嵌套子组件，而在4中，我们必须直接将Route标签写入到父组件之中，而且路由必须包含根路径，RR4不会帮我们自动拼接location。

//示例2、Route在componnt中的直接嵌套
//root.jsReactDOM.render(<Provider store={store}><ConnectedRouter history={hashHistory}><div><Route path="/" component={App} /></div></ConnectedRouter></Provider>,document.getElementById('root'))
//App.jsrender() {return (<div className="App"><Switch><Route path="/login" exact render={(({location}) => (<h1>来玩啊，小帅哥</h1>)) } /><Route path="/" component={Portal} /></Switch></div>);}//Portal.jsrender() {return (
<Content style={{background : '#FFF', padding : 24, margin : 0, minHeight : 200}}><Route path="/" exact render={() => (<h1>弗雷尔卓德必将再次统一！</h1>)} /><Route path="/products" exact component={Products} /><Route path="/search" exact component={ProductSearch} />
</Content>);}

使用Route render渲染作内联嵌套

使用Route component方法进行路由嵌套遵从了组件化要求，但也使Route标签分散在各个层级的组件之中，如果我们仍然喜欢使用4之前的集中配置方法，可以使用Route的render方法进行内联嵌套。此时，component仍可以使用this.props.children进行嵌套渲染。

//示例3、render内联渲染
ReactDOM.render(<Provider store={store}><ConnectedRouter history={hashHistory}><div><Route path="/" render={({history,location}) => (<App history={history} location={location} /><Switch><Route path="/login" exact render={(({location}) => (<h1>来玩啊，小帅哥</h1>)) } /><Route path="/" render={({history,location,match}) => (<Portal history={history} location={location} match={location}><Route path="/" exact render={() => (<h1>弗雷尔卓德必将再次统一！</h1>)} /><Route path="/products" exact component={Products} /><Route path="/search" exact component={ProductSearch} /></Portal>)} /></Switch></App>)} /></div></ConnectedRouter></Provider>,document.getElementById('root')
)

React-Router 4.2 的嵌套路由实现相关推荐

hitchhiker部署_《 Hitchhiker的React Router v4指南》：路由配置的隐藏值
hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...
在React中使用React Router v6
具有多个视图的单页应用程序 (SPA) 需要有一种路由机制,以便在这些不同视图之间导航,而无需刷新整个网页.这可以通过使用诸如React Router之类的路由库来处理. 在本教程中,让我们看看如何使 ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
使用React Router v4的嵌套路由
React Router v4 introduced a new declarative, component based approach to routing. With that approac ...
从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
react router 路由守卫_react实现hash路由
众所周知,目前单页面使用的路由有两种实现方式: hash 模式 history 模式 hash 模式路由原理: 我们先来看hash模式,页面首次加载时需要在load事件中解析初始的URL,从而展示进 ...
React路由管理 —— React Router 总结
React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查. React Router是做什么的呢, ...
react 动态修改路由_升级到 React Router 4 并实现动态加载和模块热替换
这篇文章是升级到Webpack2坑--模块热替换失效页面不自动刷新?的后续.那篇文章主要说明了,升级到 Webpack 2 之后,通过升级webpack-dev-server和react-hot-lo ...
react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样不好写所以在使用的时候建议使用react-router-config来配置路由会相对轻松第一步先安装路由依赖 yarn add react-rou ...

React-Router 4.2 的嵌套路由实现

React-Router 4.2 的嵌套路由实现相关推荐

最新文章

热门文章