React_router基础用法

下载安装

npm install --save react-router

引入

import {BrowserRouter as Router,Route,Switch,Link} from "react-router-dom";

语法

例如：

<Router>
   <Route path="/Home" component={Home}></Route>
   <Route path="/Mine" component={Mine}></Route>
</Router>

这里的<Route>代表的是路径的跳转

path：指的是网页的路径

component：值的是指向的组件

外层需要使用<Router>包裹

HashRouter与BrowserRouter的区别

BrowserRouter：h5新特性/history.push

注意：如果上线之后，需要后台做一些处理：重定向处理 404bug

http://localhost:3000/Home

HashRouter：锚点链接

http://localhost:3000/#/home

Link语法

例子：

<ul>
   <li>
      <Link to="/Home">Home页面</Link>
   </li>
   <li>
      <Link to="/Mine">Mine页面</Link>
   </li>
</ul>

这里的to代表的是指向的跳转路径

注意：需要嵌套在Router里面使用

link的一些属性

<Link to={{
     pathname:"/Home",//路径
     search:"?name=xixi",//携带的参数属性
     hash:"#the-hash",//参数类型(hash)
     state:{flag:"flsg"}//隐形参数
}}>Home页面</Link>

BrowserRouter语法

例子：

<Route exact path="/Mine" component={Mine}></Route>
<Route path="/Mine/ucenter" component={UCenter}></Route>

如果/Mine/ucenter则会包含mine组件，若要不让mine不显示则在path前面加上exact默认为true

精准匹配

例子：

<Route exact strict path="/Mine" component={Mine}></Route>

如果加上exact的话那么请求路径后面加个斜杆也不起跳转效果

404页面

如果访问的路径不存在的话可显示404页面

语法：

<Route component={NotFound}></Route>

直接加载一个组件页面即可

Switch组件

将所有的Route包裹在Switch内，即可只访问一个页面

<Switch>
	<Route path="/Home" component={Home}></Route>
</Switch>

NavLink高亮

js语法：

<NavLink to="/Home">Home页面</NavLink>

css语法：

.active{
    color: red;
}

要是加activeClassName可改变ClassName

传参

语法：

<Route exact strict path="/Mine/:id?" component={Mine}></Route>

在请求路径后面加上斜杆冒号和属性名[可多传]

注：要是在最后加上一个问号，代表参数可有可无，不会跳转到404页面

Redirect重定向

语法：

{
   islogin ? <div>shop</div> :
   <Redirect to="/"/>
}

如果判断为false的话，将自动跳转到根路径[用于没有登录状态下使用]

push与replace重定向

push：叠加的上一次页面依然存在

props.history.push("/")

replace：是替换，上一次的页面不存在 

props.history.replace("/")

一般定在方法中...

Prompt函数

语法：

<Prompt when={!!this.state.name} message={'确定要离开么？'}>