react 路由基础实现4.x版本(404处理)

喜欢ヅ旅行 2021-07-24 20:02 398阅读 0赞

路由4版本
    
    	1、安装
    		cnpm install -S react-router@4.3.1 react-router-dom@4.3.1
    
    	2、在路由主入口文件引入
    		import React,{Component} from 'react'
    		import {Route,BrowserRouter,Swicth} from 'react-router-dom'
    
    			其中:
    			BrowserRouter：
    				是类似3版本的Router，在最外层包裹
    			Switch:
    				则其中的<Route>在路径相同的情况下，只匹配第一个，这个可以避免重复匹配
    
    	4、使用
    		(1)路由入口文件最外层使用BrowserRouter包裹
    		(2)路由由Switch包裹
    
    		即BrowserRouter->Switch->Route
    
    	5、若声明了一个组件xx
    		在其他组件中<xx>内容</xx>
    		
    		则表示内容是在xx组件内容上基础显示
    		且如果内容嵌套了其他路由,则需要在xx组件内{this.props.children}
    
    	6、跳转Link
    		在主路由页面引入Link跳转,使用前先
    			import{Link} from 'react-router-dom'
    			
    			<Link to='路由path'>xx</Link>
    
    	7、在匹配的是'/'的根路径上的路由添加exact
    		如:<Route exact path="/" component={Home}></Route>
    
    			其中:
    				(1)exact表示精确匹配,避免其他路径能匹配到根路径
    				(2)如路由为父路由则不添加,否则无法匹配子路由,只能在子路由上添加
    
    	8、添加404,与所有路由不匹配时的情况
    		即再添加一个路由,不设置path,其中的组件内容任意,当与所有路由都不匹配时,会来匹配该路由
    
    		如:  <Route   component={NotFound}></Route>

代码示例:  
**路由主入口文件(其中嵌套了一层引入所有路由的路由)**

import React,{ Component} from 'react'
    import { Route,BrowserRouter} from 'react-router-dom'
    import App from '../App.js'
    import SubRouter from './subRouter'
    
    
    export default class AppRouter extends Component{ 
    
    	render()
    	{ 
    		return(
    
    		<BrowserRouter>
    	{  /*App这样写作为视图,即其他路由的内容都在次组件内容上显示*/ }
    			<App>
    		{  /*因为路由也是组件,插槽的使用*/ }
    				<Route path='/' component={ SubRouter}></Route>
    			</App>
    
    		</BrowserRouter>
    		)
    	}
    
    }

**包含路由的组件(含有404NotFound路由)**

import React,{ Component} from 'react'
    import { Route,Switch} from 'react-router-dom'
    import City from '../container/City'
    import Detail from '../container/Detail'
    import Home from '../container/Home'
    import NotFound from '../container/404'
    
    export default class SubRouter extends Component{ 
      render(){ 
        return(
          <Switch>
            {  /* exact:精准匹配路径,有<Switch>标签，则其中的<Route>在路径相同的情况下，只匹配第一个，这个可以避免重复匹配 */ }
            <Route exact path="/" component={ Home}></Route>
            <Route  path="/city" component={ City}></Route>
            <Route  path="/detail" component={ Detail}></Route>
            <Route   component={ NotFound}></Route>
          </Switch>
        )
      }
    }

**作为视图的组件(其他路由内容在此基础上添加):**

import React,{ Component} from 'react'
    import { Route,BrowserRouter,Link} from 'react-router-dom'
    
    
    export default class App extends Component{ 
    	render()
    	{ 
    		return(
    
    			<div>
    				<ul>
    					<li>
    						<Link to="/">首页</Link>
    					</li>
    					<li>
    						<Link to="/city">城市</Link>
    					</li>
    					<li>
    						<Link to="/detail">详情</Link>
    					</li>
    
    				</ul>
    			{  /* 父组件中插槽的显示*/ }
    				{ this.props.children}
    
    			</div>
    		)
    	}
    }

**404组件:**

import React,{ Component} from "react"
    
    export default class NotFound extends Component{ 
    	render()
    	{ 
    		return(
    
    			<div>
    				404 NOT FOUND
    
    			</div>
    		)
    	}
    }

**内容组件2:**

import React,{ Component} from "react"
    
    export default class Detail extends Component{ 
    	render()
    	{ 
    		return(
    
    			<div>
    				详情
    
    			</div>
    		)
    	}
    }