关于修改react项目中默认路由的小思路

近期在做项目的时候，业务提了一个需求，指定的几个角色在登录系统后不能看到原本系统中的默认展示页，需要展示的是该角色仅仅能看到自己所属角色对应的服务菜单。

针对业务人员提出的上述功能，做了相关的分析。

例如：

 在react中引入了IndexRoute组件，显式的指定了默认页面的路由信息，这里IndexRoute的作用类似于web项目中的Index.html功能。

<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="accounts" component={Accounts1}/>
<Route path="statements" component={Statements1}/>
</Route>
</Router>

这样在浏览器页签中打开该系统对应的链接后，就会把Router中的所有路由加载了，在用户登录到系统后访问/目录的的时候，加载的组件结构如下：

<APP>

<Home/>

</APP>

这时候，问题就出现了，此时如果另外一个不同的用户登录进来后，需要将Accounts1组件作为默认页在登录系统后进行展示，该如何处理呢？

因为Router是在浏览器打开登录页时就已经加载到浏览器中了，此时若想通过修改router中的IndexRoute的值，是不太现实的，可能会比较麻烦。

此时就需要了解一下react-router实现的原理，具体可以参考详细说明：https://www.cnblogs.com/zd-aw123/p/9810897.html

根据上述说明后，我们可以通过采用在登录成功后直接通过

history.push("/accounts")；

路由到指定的页面中，间接的实现不同角色登录系统后展示不同的默认页面，当然具体的实现逻辑还需根据项目实际需要进行控制。

关于修改react项目中默认路由的小思路

原文：https://www.cnblogs.com/QiLinJinYun/p/11358206.html