React-router(摘记)
react-router被拆分为react-router、react-router-dom、react-router-native三部分
一级路由：
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
class App extends Component {
render() {
return (
<Router basename='/route'>
<div>
<Route path="/" exact component={Home}></Route>
<Route path="/mime" render={({match}) => <div>Home</div>}></Route>
// 和render是一样的功能，不过它不论是否匹配到都会调用
<Route path="/list" children={({match})=>(...)}></Route>
<ul>
// replace：基本不用，为true时会替换掉上次访问的地址
// exact：如果为true，只有当访问地址严格匹配时才会使用激活样式。
// strict：如果为true，只有挡访问地址后的斜杠严格匹配（有或没有）才会使用激活样式。
// isActive：跟一个函数，当导航激活时要做的事情。
<li> <Link to="/" replace="true">home</Link> </li>
<li> <Link to="/mime">mime</Link> </li>
<li> <Link to="/list">list</Link> </li>
<li>
<Link to={{
pathname: '/list',
search: '?sort=name',
state: { id: 2 }
}} /></li>
</ul>
</div>
</Router> );
}
}
二级路由：
export default class List extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1>列表页</h1> <ul> <li> <Link to={`${this.props.match.url}/details`}>详情</Link> </li> <li> <Link to={`${this.props.match.url}/edit`}>编辑</Link> </li>
</ul>
<Route path={`${this.props.match.url}/details`} component={Details} />
<Route path={`${this.props.match.url}/edit`} component={Edit} /> </div> ); } }
带参数
<Route path={`${this.props.match.url}/:id(20|100)`} component={Details} />
获取对应的参数
<h1>{this.props.match.params.id}</h1>
导航link
<NavLink to="/mime" activeClassName='actvived'>mime</NavLink> <NavLink to="/mime" activeStyle={{color: red,fontSize: 20px}}>mime</NavLink>
静态路由：StaticRouter
// 只会渲染一次，而且不会直接地对用户的交互操作做出反应
import { createServer } from 'http'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { StaticRouter } from 'react-router'
createServer((req, res) => {
// 这个context包含渲染的结果
const context = {}
const html = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App/>
</StaticRouter>
)
// 如果使用<Redirect>，context.url将包含要重定向到的URL
if (context.url) {
res.writeHead(302, {
Location: context.url
})
res.end()
} else {
res.write(html)
res.end()
}
}).listen(3000)
// basename：所有位置的基本url，正确的格式应该是前面有/后面没有/。 <StaticRouter basename="/main"> <Link to="/list"/> <!--渲染出来应该是<a href="/main/list">--> </StaticRouter>
// location：如果是个字符串就应该是服务器上收到的url（req.url）。如果是个对象应该是一个类似{pathname, search, hash, state}的位置对象。 <StaticRouter location={{ pathname: '/home' }}> <App/> </StaticRouter>
//context: 一个普通js对象，在渲染过程中组件可以向对象里添属性以存储有关渲染的信息 //app上有个404组件，把status改成404 const NotFound = () => ( <Route render={({ staticContext }) => { if (staticContext) { staticContext.status = 404; } return ( <div> <h1>你输入的地址不正确哟!</h1> </div> ); }} /> ); // 在服务端我们就可以通过判断，对这个404界面发送404响应 const context = {}; const content = renderToString( <Provider store={store}> <StaticRouter location={req.url} context={context}> <App /> </StaticRouter> </Provider> ); if (context.status === 404) { res.status(404); }
// 判断重定向，如果有context.url就说明应用被重定向，这允许我们从服务器发送适当的重定向。 if (context.url) { // can use the `context.status` that // we added in RedirectWithStatus redirect(context.status, context.url) }
<Switch>
// 用来包裹Route或者Redirect组件，而且不能放其他元素， // 用来渲染第一个匹配到的路由，不会向下继续匹配。 // 如果不用Switch包裹的话，访问/about时下面三个组件都会被渲染 <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/>
Redirect
// 将匹配到的路径重定向到一个新的地址。 // 新的地址应该覆盖掉访问的地址 // from：匹配到的访问的地址 // to：重定向到的地址 // push：为true时，重定向到的地址会添加到历史访问记录，并且无法回到之前访问的地址。 <Route path="/game" component={Game}></Route> <Redirect from="/home" to="game" push={true}></Redirect>
<withRouter>
// withRouter可以用来包装任何自定义组件，并将history、location、match三个对象传入。这样组件就可以拿到路由信息。
import {withRouter} from 'react-router-dom';
const Home = withRouter(({history,location,match})=>{
return <h1>{location.pathname}</h1>
})
<history>
length：获取历史堆栈中的条目数 action：获取当前操作（push/pop/replace） location：获取当前位置，包括（pathname、search、hash、state、） push('')：添加一个新的条目到历史堆栈（一般会用来跳转到一个新页面） replace('')：替换掉当前堆栈上的条目 go(n)：通过n个条目移动历史堆栈中的指针，向前或向后n个 goBack()：后退一个历史条目，相当于go(-1)。 goForward()：前进一个历史条目，相当于go(1) block：防止导航
