react笔记之路由--Router

责编:menVScode 2017-08-13 21:31 阅读(741)

        Route组件很重要,当 location 匹配到 route 的 path 后,route最基本的职责就是渲染UI。

import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

        如果 app 的 location 是“/”,那么UI的层级就会像: 

<div>
  <Home/>
  <!-- react-empty: 2 -->
</div>

        如果 app 的 location 是“/news”,那么news UI的层级就会像: 

<div>
  <!-- react-empty: 1 -->
  <NewsFeed/>
</div>

        react-empty”注释只是 React 的 null 渲染的实现细节。从技术上讲一个Route即使null,它也是被渲染的,只要 location 和 route 的 path 匹配,组件就被渲染。


        Route 渲染渲染组件的方式有三种:<Route component>、<Route render>、<Route children>

  • import {BrowserRouter as Router,Route} from 'react-router-dom';
    function Aaa(props){
    	return(
    		<div>我是aaa</div>
    	)
    }
    
    function Bbb(props){
    	return(
    		<div>bbb</div>
    	)
    }
    
    ReactDOM.render(
    	<Router>
    		<div>
    			<Route path='/app' render={
    				()=>{
    					return(
    						<div>
    							<div>当前的这个组件是app</div>
    							<App />
    						</div>
    					)
    				}
    			} />
    			<Route path='/aaa' component={Aaa} />
    			<Route path='/bbb' component={Bbb} />
    		</div>
    	</Router>,
    	document.getElementById('root')
    );
标签: 路由 Router react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码