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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
路由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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
)
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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>
)
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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>
)
}
}

1
2
3
4
5
6
7
8
9
10
11
12
import React,{Component} from "react"
export default class NotFound extends Component{
render()
{
return(
<div>
404 NOT FOUND
</div>
)
}
}

1
2
3
4
5
6
7
8
9
10
11
12
import React,{Component} from "react"
export default class Detail extends Component{
render()
{
return(
<div>
详情
</div>
)
}
}