在 React router 中一般使用的组件有三种:html
关于路由组件,若是咱们的应用有服务器响应web的请求,建议使用<BrowserRouter>
组件; 若是使用静态文件服务器,建议使用<HashRouter>
组件react
npm install react-router-dom
import React, { Component, Fragment } from 'react'; import { Provider } from 'react-redux'; import { BrowserRouter, Route } from 'react-router-dom'; import store from './store'; import Header from './common/header'; import Home from './pages/home'; import Detail from './pages/detail'; import Login from './pages/login'; class App extends Component { render() { return ( <Provider store={store}> <Fragment> <BrowserRouter> <div> <Header /> <Route path='/' exact component={Home}></Route> <Route path='/login' exact component={Login}></Route> <Route path='/detail/:id' exact component={Detail}></Route> </div> </BrowserRouter> </Fragment> </Provider> ) } } export default App;
BrowserRouter(history模式) 和 HashRouter(hash模式)做为路由配置的最外层容器,是两种不一样的模式,可根据须要选择。web
class App extends Component { render() { return ( <BrowserRouter> <Header /> <Route path='/' exact component={Home}></Route> <Route path='/login' exact component={Login}></Route> <Route path='/detail/:id' exact component={Detail}></Route> </BrowserRouter> ) } }
class App extends Component { render() { return ( <HashRouter> <Header /> <Route path='/' exact component={Home}></Route> <Route path='/login' exact component={Login}></Route> <Route path='/detail/:id' exact component={Detail}></Route> </HashRouter> ) } }
有如下几个参数:npm
import About from './pages/about'; ··· ··· <Route path='/about' exact component={About}></Route>
<Route path='/about' exact render={() => (<div>about</div>)}></Route>
render 也能够直接返回 About 组件,像下面:编程
<Route path='/about' exact render={() => <About /> }></Route>
<Route path='/about' exact render={(props) => { return <About {...props} name={'cedric'} /> }}></Route>
而后,就可在 About 组件中获取 props 和 name 属性:redux
componentDidMount() { console.log(this.props) } // this.props: // history: {length: 9, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …} // location: {pathname: "/home", search: "", hash: "", state: undefined, key: "ad7bco"} // match: {path: "/home", url: "/home", isExact: true, params: {…}} // name: "cedric"
<Route path='/user' exact render={(props) => { // isLogin 从 redux 中拿到, 判断用户是否登陆 return isLogin ? <User {...props} name={'cedric'} /> : <div>请先登陆</div> }}></Route>
渲染与该地址匹配的第一个子节点 <Route>
或者 <Redirect>
。浏览器
相似于选项卡,只是匹配到第一个路由后,就再也不继续匹配:服务器
<Switch> <Route path='/home' component={Home}></Route> <Route path='/login' component={Login}></Route> <Route path='/detail' component={detail}></Route> <Redirect to="/home" from='/' /> </Switch> // 相似于: // switch(Route.path) { // case '/home': // return Home // case '/login': // return Login // ··· ··· // }
因此,若是像下面这样:react-router
<Switch> <Route path='/home' component={Home}></Route> <Route path='/login' component={Login}></Route> <Route path='/detail' component={detail}></Route> <Route path='/detail/:id' component={detailId}></Route> <Redirect to="/home" from='/' /> </Switch>
当路由为/detail/1
时,只会访问匹配组件detail
, 因此须要在detail路由上加上exact
:dom
<Switch> <Route path='/home' component={Home}></Route> <Route path='/login' component={Login}></Route> <Route path='/detail' exact component={detail}></Route> <Route path='/detail/:id' component={detailId}></Route> <Redirect to="/home" from='/' /> </Switch>
Link 和 NavLink 均可以用来指定路由跳转,NavLink 的可选参数更多。
两种配置方式:
<Link to='/login'> <span>登陆</span> </Link>
<Link to={{ pathname: '/login', search: '?name=cedric', hash: '#someHash', state: { fromWechat: true } }}> <span>登陆</span> </Link>
点击连接 进入 Login 页面后,就能够在this.props.location.state
中看到 fromWechat: true
:
能够看作 一个特殊版本的 Link,当它与当前 URL 匹配时,为其渲染元素添加样式属性。
<Link to='/login' activeClassName="selected"> <span>登陆</span> </Link>
<NavLink to="/login" activeStyle={{ fontWeight: 'bold', color: 'red' }} > <span>登陆</span> </NavLink>
const oddEvent = (match, location) => { if (!match) { return false } const eventID = parseInt(match.params.eventID) return !isNaN(eventID) && eventID % 2 === 1 } <NavLink to="/login" isActive={oddEvent} >login</NavLink>
<Redirect>
将导航到一个新的地址。即重定向。
<Switch> <Route path='/home' exact component={Home}></Route> <Route path='/login' exact component={Login}></Route> <Redirect to="/home" from='/' exact /> </Switch>
上面,当访问路由‘/’
时,会直接重定向到‘/home’
。
<Redirect>
常在用户是否登陆:
class Center extends PureComponent { render() { const { loginStatus } = this.props; if (loginStatus) { return ( <div>我的中心</div> ) } else { return <Redirect to='/login' /> } } }
也可以使用对象形式:
<Redirect to={{ pathname: "/login", search: "?utm=your+face", state: { referrer: currentLocation } }} />
withRouter 能够将一个非路由组件包裹为路由组件,使这个非路由组件也能访问到当前路由的match, location, history对象。
import { withRouter } from 'react-router-dom'; class Detail extends Component { render() { ··· ··· } } const mapStateToProps = (state) => { return { ··· ··· } } const mapDispatchToProps = (dispatch) => { return { ··· ··· } } export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));
例如,点击img进入登陆页:
class Home extends PureComponent { goHome = () => { console.log(this.props); this.props.history.push({ pathname: '/login', state: { identityId: 1 } }) } render() { return ( <img className='banner-img' alt='' src="img.png" onClick={this.goHome} /> ) } }
history 对象一般会具备如下属性和方法:
length - (number 类型) history 堆栈的条目数 action - (string 类型) 当前的操做(PUSH, REPLACE, POP) location - (object 类型) 当前的位置。location 会具备如下属性: pathname - (string 类型) URL 路径 search - (string 类型) URL 中的查询字符串 hash - (string 类型) URL 的哈希片断 state - (object 类型) 提供给例如使用 push(path, state) 操做将 location 放入堆栈时的特定 location 状态。只在浏览器和内存历史中可用。 push(path, [state]) - (function 类型) 在 history 堆栈添加一个新条目 replace(path, [state]) - (function 类型) 替换在 history 堆栈中的当前条目 go(n) - (function 类型) 将 history 堆栈中的指针调整 n goBack() - (function 类型) 等同于 go(-1) goForward() - (function 类型) 等同于 go(1) block(prompt) - (function 类型) 阻止跳转。
因此,若是想在路由组件的子组件中使用 history ,须要使用 withRouter 包裹:
import React, { PureComponent } from 'react'; import { withRouter } from 'react-router-dom'; class 子组件 extends PureComponent { goHome = () => { this.props.history.push('/home') } render() { console.log(this.props) return ( <div onClick={this.goHome}>子组件</div> ) } } export default withRouter(子组件);
import { TransitionGroup, CSSTransition } from "react-transition-group"; class App extends Component { render() { return ( <Provider store={store}> <Fragment> <BrowserRouter> <div> <Header /> {/* 最外部的<Route></Route>不进行任何路由匹配,仅仅是用来传递 location */} <Route render={({location}) => { console.log(location); return ( <TransitionGroup> <CSSTransition key={location.key} classNames='fade' timeout={300} > <Switch> <Redirect exact from='/' to='/home' /> <Route path='/home' exact component={Home}></Route> <Route path='/login' exact component={Login}></Route> <Route path='/write' exact component={Write}></Route> <Route path='/detail/:id' exact component={Detail}></Route> <Route render={() => <div>Not Found</div>} /> </Switch> </CSSTransition> </TransitionGroup> ) }}> </Route> </div> </BrowserRouter> </Fragment> </Provider> ) } }
.fade-enter { opacity: 0; z-index: 1; } .fade-enter.fade-enter-active { opacity: 1; transition: opacity 300ms ease-in; }
项目执行npm run build
后,将打包后的build文件当大 Nginx 配置中。
若是 react-router 路由 使用了 history 模式(即<BrowserRouter>
),那么在 Nginx 配置中必须加上:
location / { ··· ··· try_files $uri /index.html; ··· ··· } }
若是 react-router 路由 使用了 hash 模式(即<HashRouter>
),那么在 Nginx 中不须要上面的配置。