react路由基础及v3与v4的一些差异

路由带参数写法：

    <Router history={hashHistory}>//定义跳转方式#
   		<Route path="/" component={main}>
    		<Route path="/detail/:id" commmponent={detail}></Route>
    		<Route push to="/goods?a=xxx&b=yyy" /> 
    		<Route push to=to={{
			pathname: '/login',
			search: '?utm=your+face',
			state: { referrer: currentLocation }/> 
   		</Route>
	</Router>.docuemnt.elementId("app")

问题：
当/detail 不带参数的时候会报错
解决方式：

vue是使用 path=“home/:id？”

获取路由参数：

class home …{
return (

home

{this.props.params.id}

) }

react路由跳转方式：

js跳转

this.props.history.push('/detail/' + value);

Link标签跳转

calss main extent  component {
   return{
        <div><Link to="/home ">home</Link></div>
        <div>{this.props.children}</div>//子路由显示的地方
     }
}

react路由类型：

默认路由:
V3的< IndexRoute >
V4的< Route exact>;

 <switch>
     <Route path="/" exact component={home}/>
      <Redirect to="/" />
  </switch>

授权路由：

< Redirect > 组件
它会始终执行浏览器重定向，当处于中时，只有其他路由不匹配的情况下，才会渲染重定向组件；

包容性路由：
例：

<header>
  <Route path="/user" component={usertop}/>
  <Route path="/user" component={userbottom}/>
  <Route path="/user/list" component={userlist}/>
</header>

V3路由有排他性，即一次只能渲染一条，
V4中上面的会将匹配的路由的组件都渲染，v4使用来进行路由排他。
例上面，匹配路由 /user 时， usertop userbottom 与 userlist 会同时渲染；

路由的战略性布局（即使用排他路由策略）

例：

<header>
  <switch>
     <Route path="/" exact component={home}/>
     <Route path="/user" component={usertop}/>
      <Route path="/user/list" component={userlist}/>
      <Redirect to="/" />
  </switch>
</header>

这样的即使没有home没有exact，它也会被渲染因为Redirect;

路由/user 时，匹配如下：
匹配了/user，不匹配/user/list(因为这里使用了switch排他路由)

所以，当需要同时匹配 /user 和/user/list的话，可将/user/list写于 /user前面，

<header>
  <switch>
     <Route path="/" exact component={home}/>
      <Route path="/user/list" component={userlist}/>
     <Route path="/user" component={usertop}/>
      <Redirect to="/" />
  </switch>
</header>

路由的动态匹配：

 <header>
   <switch>
      <Route path="/" exact component={home}/>
      <Route path="/users" component={usertop}/>
       <Route path="/user/:userId" component={userTop}/>
       <Redirect to="/" />
   </switch>
 </header>

结果：
/user/12 与/user/add都能匹配，渲染userTop,但实际上，需求是只有/user/12详情的时候才渲染，因此就需要“正则路由”：必须是数字
<Route path="/user/:userId(\\dt)" component={userTop}/>

V3到V4路由写法的改变：

路由不适用Route嵌套，而是写在组件component下，以前路由嵌套时，除了写路由，还要写路由渲染的地方，即<this.props.children>,
这样，路由就会在此渲染，V4改变，匹配路由的组件想在哪渲染，路由就写在哪，即路由直接替代<this.props.children>的位置；

相当于vue抽象路由view的是this.props.children

怎么看元素是否被重新渲染：

在console中的rendeing；
把Paint Flashing勾选上，当渲染的时候会有标记；

子路由跳转的渲染机制：

这里的子路由的跳转，每次都会加载子组件以及父组件重新加载，然后移除(删除，在生命周期的右边)其他的路由；
为什么父组件会被渲染？
因为子路由是属于父组件的，切换路由的时候是改变了父组件的props，所以会触发父组件的更新；
react中如果数据更新只会更新相应的位置，这种技术是react的diff算法；
重绘是整个页面重新刷新；
重排是局部；

react 路由的配置

与vue不同的是，v4的路由不需要写抽象路由，直接哪里需要放哪里，路由标签替代抽象路由。
但是，所有的路由的配置都写在一个位置，包括所有嵌套路由：
所以子路由中的路由的嵌套不需要引入子路由，而是在总的路由的配置中引入；并且这个时候记得to的路由路径应该是加上子路由的路径；
例一个项目的路由配置，这里写在app.js：

 <div id='AppMain'>
                    <Switch>
                    <Route path="/" exact component={Home}/>
                    <Route path="/Home" component={Home}/>
                    <Route path="/Goods" component={Goods}/>
                    <Route path="/Account" component={Account}/>
                    </Switch>
                </div>

路由返回

react-route的话有：history.goback()

ps：window.history.back();也可以撒，为啥不用？

V3与V4区别

React Router v4 还有很多其他很酷的方面。最后，一定要提几件小事，以免到时它们让你措手不及。

< Link> vs < NavLink>
在 v4 中，有两种方法可以将锚标签与路由集成：< Link> 和 < NavLink>
< NavLink> 与 < Link> 一样，但如果 < NavLink> 匹配浏览器的 URL，那么它可以提供一些额外的样式能力。例如，在示例应用程序中，有一个< PrimaryHeader> 组件看起来像这样：

const PrimaryHeader = () => (
   <header className="primary-header">
     <h1>Welcome to our app!</h1>
     <nav>
       <NavLink to="/app" exact activeClassName="active">Home</NavLink>
       <NavLink to="/app/users" activeClassName="active">Users</NavLink>
       <NavLink to="/app/products" activeClassName="active">Products</NavLink>
     </nav>
   </header>
 )

使用 < NavLink> 可以让我给任何一个激活的链接设置一个 active 样式。而且，需要注意的是，我也可以给它们添加 exact 属性。如果没有 exact，由于 v4 的包容性匹配策略，那么在访问 /app/users 时，主页的链接将处于激活中。就个人经历而言，NavLink 带 exact属性等价于 v3 的，而且更稳定。

URL 查询字符串
再也无法从 React Router v4 中获取 URL 的查询字符串了
动态路由
关于 v4 （）路由,可以随时随地渲染它们。

v4 API：

match对象：

<Route path="/users" component={UserLayout}/>

UserLayout:（由/users匹配渲染）

<nav>公共导航<nav>
<div>
  <switch>
    <Route path="/users" component={usertop}/>
    <Route path="/user/:userId" component={userInfo}/>
  </switch>
</div>

使用match：

<div>
  <switch>
    <Route path={props.match.path} component={usertop}/>
    <Route path={`${props.match.path}/:userId`} component={userInfo}/>
  </switch>
</div>

【match中的match.path与match.url】
path是路由的编写
url是浏览器实际路径

path用于匹配路由模式，用于构建嵌套
url匹配url，用于构建嵌套的

v4 API
【match】
match使用路由时：
<Route path={${this.props.match.path}/agency} component={AgencyDetail}/>
<Route path={${this.props.match.path}/agency/:agencyId} component={AgencyDetail}/>

[以上太久之前的笔记了，如有错误，请指出☺]

KeroroLX

发布了76 篇原创文章 · 获赞 9 · 访问量 6万+

私信关注