# 路由重定向 路由重定向目的還是為了進入首頁后默認進入一個有信息的頁面，或者當用戶未登錄進行路由重定向等等。 ``` <Redirect to={'/home'} /> ``` ``` import React, {Component, Fragment} from 'react' import {Link, Route,Redirect} from "react-router-dom"; import Home from "./pages/Home"; import NewsCenter from "./pages/NewsCenter"; import News from "./pages/News"; import About from "./pages/About"; import style from './app.css' export default class App extends Component { constructor(props) { super(props) this.state = {} console.log(this); } render() { let {pathname} = this.props.location return ( <Fragment> {/*導航 Link vue的用法很相似*/} <Link to={"/home"} className={pathname == '/home' ? style.active: ''}>首頁</Link> <Link to={"/news/1"} className={pathname == '/news/1' ? style.active : ''}>新聞</Link> <Link to={"/news"} className={pathname == '/news' ? style.active : ''}>新聞中心</Link> <Link to={"/about"} className={pathname == '/about' ? style.active : ''}>關于</Link> {/*路由指向到哪個頁面 指的是組件*/} <Route path={'/home'} component={Home}/> <Route path={'/news'} component={NewsCenter} exact/> <Route path={'/news/:id'} component={News} exact/> <Route path={'/about'} component={About}/> <Redirect to={'/home'} /> </Fragment> ) } } ``` 上面這樣寫完之后會報錯，因為它會認為每個頁面都需要重新跳轉到’home'組件中。原因是因為React路由的原理是從上向下逐一匹配，到了最后一項就會重定向。這樣就會導致死循環。 如何解決？ # Switch路由組件 ``` <Switch> <Route path={'/home'} component={Home}/> <Route path={'/news'} component={NewsCenter} exact/> <Route path={'/news/:id'} component={News} exact/> <Route path={'/about'} component={About}/> <Redirect to={'/home'} /> </Switch> ``` switch其實就和JS中的switch 只會匹配一個。就不再報錯了。可以在理解上認為沒有Switch組件就相當于if else 有switch 就是JS的switch # 總結 以后書寫路由必須書寫Switch組件節省性能。