先上图:
标题:通过路由来实现简单的tab切换
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect
} from 'react-router-dom'
function App() {
let tabHead=[
{
link:'/page1',
name:'页面1'
},
{
link:'/page2',
name:'页面2'
},
{
link:'/page3',
name:'页面3'
}
]
let routes=[
{
path:'/page1',
component:Page1
},
{
path:'/page2',
component:Page2
},
{
path:'/page3',
component:Page3
}
]
return (
<div className="App">
<Router>
<div>
<ul className="App-tab">
{
tabHead.map(item=>{
return <li className="App-tab-item" key={item.link}>
<Link to={item.link}>{item.name}</Link>
</li>
})
}
</ul>
</div>
<Switch>
{
routes.map(item=>{
return <Route path={item.path} component={item.component} key={item.path}></Route>
})
}
<Redirect to="/page1" />
</Switch>
</Router>
</div>
);
}
function Page1(){
return (
<div>
<h1> 页面1的内容</h1>
</div>
)
}
function Page2(){
return (
<div>
<h1>页面2的内容</h1>
</div>
)
}
function Page3(){
return (
<div>
<h1> 页面3的内容</h1>
</div>
)
}
export default App;
注意点:
1.react-router有很多个版本,一般会默认安装最新的包,并且4.x以上有很大的改版,不建议参考过期的文档,中文文档一般都是低版本的。本文用的是5.x版本,官网:https://reactrouter.com/web/guides/quick-start
2.所有的</Route>
最终都在一个唯一的</Router>
下面。</Route>
的匹对受顺序的影响,匹对顺序是从上往下,比如
<Router>
<div>
<Switch>
<Route path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
</Switch>
</div>
</Router>
这样匹配,访问/about是看不到页面内容的。因为它把所有的/xxx都匹配到了/路由页面去了。如果把/
放到最后,则可以访问。如下面
<Router>
<div>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
</Switch>
<Route path="/">
<Home />
</Route>
</div>
</Router>
3.exact的作用:不加就会匹配所有,像上面 /,/about,/users
,这样的顺序写,如果不把/
放到最后匹配,还有一种方法是exact严格匹配,能达到同样的效果。如下:
<Router>
<div>
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
</Switch>
</div>
</Router>
4.新版本和旧版本的嵌套方式不一样,4.x以上不能直接将</Route>
嵌套在</Route>
里面。是在不同组件里面嵌套,可以参考官网,写的很清楚。
5.关于switch的作用:https://www.jianshu.com/p/d5173d7b411a