# Router replacing multiple routes

**URL:** <https://forums.fusetools.com/t/router-replacing-multiple-routes/4582>\
**Category:** How-to Discussions\
**Created:** [November 21, 2017, 9:08pm UTC](https://forums.fusetools.com/t/router-replacing-multiple-routes/4582 "2017-11-21T21:08:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luke](https://avatars.discourse-cdn.com/v4/letter/l/7ab992/32.png) [@Luke](https://forums.fusetools.com/u/Luke)\
**Post date:** [November 21, 2017, 9:08pm UTC](https://forums.fusetools.com/t/router-replacing-multiple-routes/4582/1 "2017-11-21T21:08:34Z")

</div>

Hi there

How would one go about replacing multiple routes in the route stack in Fuse?

For instance, say the user’s current route stack is `StorePage` \> `AddProductPage` \> `ConfirmPage`

However, once they confirm I want to erase that previous history and put them on `CartPage`, with the option to go back to the initial `StorePage` (so a stack of `StorePage` \> `CartPage`).

How do I do so without invoking a strange transition?  
I could do…

```auto
router.goBack();
router.replace('CartPage');

```

…But then the app would suddenly flash to the `StorePage`, before transitioning to `CartPage`.

Is there a way of replacing both the current route _and_ the previous route at the same time? (while maintaining a smooth transition)  
Maybe something like…?

```auto
router.modify({
    'how': 'Replace',
    'replaceDepth': 2,
    'path': ['CartPage', {}]
});

```

This kind of flow adjustment is something I seem to need a lot with mobile apps, and I seem to have struggled with it in most frameworks. I dunno if I’m maybe thinking about things wrong, or missing something obvious, but it’s also proving to be hard to do in Fuse.

Any help would be much appreciated, thanks.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 22, 2017, 12:20pm UTC](https://forums.fusetools.com/t/router-replacing-multiple-routes/4582/2 "2017-11-22T12:20:15Z")

</div>

[RouterModify](https://www.fusetools.com/docs/fuse/navigation/routermodify) and its [JS counterpart](https://www.fusetools.com/docs/fuse/navigation/router/modify_eca3d620) do seem to be exactly what you should be using to achieve what you’re after.

But that’s just about the route stack. You definitely need some more configuration around transitions, so that when you’re navigating in non-linear ways, you wouldn’t get the artefacts you’re mentioning. See [Transition](https://www.fusetools.com/docs/fuse/triggers/transition) docs for details, and make sure to check out the example linked at the bottom of that section.

If these tips don’t help and you’re still stuck, please post a complete, minimal, ready-to-run example that shows the problem and we’ll take it from there.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Luke](https://avatars.discourse-cdn.com/v4/letter/l/7ab992/32.png) [@Luke](https://forums.fusetools.com/u/Luke)\
**Post date:** [November 22, 2017, 5:26pm UTC](https://forums.fusetools.com/t/router-replacing-multiple-routes/4582/3 "2017-11-22T17:26:29Z")

</div>

Hi Uldis, here’s an example:

```auto
<App>
	<Router ux:Name="router" />

	<JavaScript>
		module.exports.onGoto2 = function(){
			router.push('Page2');
		}
		module.exports.onGoto3 = function(){
			router.push('Page3');
		}
		module.exports.onGoto4 = function(){
			router.push('Page4');
		}
		module.exports.onRoute4 = function(){
			//replace the last 2 pages with Page4
			router.goBack();
			router.modify({
				'how': 'Replace',
				'path': ['Page4', {}]
			});
		}
		module.exports.onBack = function(){
			router.goBack();
		}
	</JavaScript>

	<Navigator DefaultPath="Page1">
		<Page ux:Template="Page1" Color="#faa">
			<StackPanel Alignment="Center" ItemSpacing="20">
				<Text Value="Page1" Color="#000" />
				<Button Text="Goto Page2" Color="#fff" Padding="20" Tapped="{onGoto2}" />
				<Button Text="Goto Page4" Color="#fff" Padding="20" Tapped="{onGoto4}" />
			</StackPanel>
		</Page>
		<Page ux:Template="Page2" Color="#afa">
			<StackPanel Alignment="Center" ItemSpacing="20">
				<Text Value="Page2" Color="#000" />
				<Button Text="Goto Page3" Color="#fff" Padding="20" Tapped="{onGoto3}" />
				<Button Text="GoBack" Color="#fff" Padding="20" Tapped="{onBack}" />
			</StackPanel>
		</Page>
		<Page ux:Template="Page3" Color="#aaf">
			<StackPanel Alignment="Center" ItemSpacing="20">
				<Text Value="Page3" Color="#000" />
				<Button Text="Reroute to Page4" Color="#fff" Padding="20" Tapped="{onRoute4}" />
				<Button Text="GoBack" Color="#fff" Padding="20" Tapped="{onBack}" />
			</StackPanel>
		</Page>
		<Page ux:Template="Page4" Color="#faf">
			<StackPanel Alignment="Center" ItemSpacing="20">
				<Text Value="Page4" Color="#000" />
				<Button Text="GoBack" Color="#fff" Padding="20" Tapped="{onBack}" />
			</StackPanel>
		</Page>
	</Navigator>
</App>

```

When navigating from Page 3 to Page 4, I want to erase Page2 from the history, then replace the current Page3 with Page4, so it transitions smoothly, and route stack becomes Page1 \> Page4.

I can currently do this by going back a page, and _then_ replacing the current with Page4, or by using a goto to jump back to Page 1, then push page 4. But both of these involve 2 navigations, so don’t allow me to transition smoothly.

I think the best solution would be to provide something like an erase action:

```auto
router.modify({
	'how': 'erase',
	'path': ['Page2']
});
router.modify({
	'how': 'replace',
	'path': ['Page4']
});

```

I’ve have played with trying to achieve this with custom transitions, but it doesn’t seem possible as the Page3 \> Page1 transition plays instantly and snaps to Page1, before the Page1 \> Page4 transition plays. I can’t find a way of making 3 persist, so it can smoothly transition to 4.

Thanks again

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [November 23, 2017, 11:44am UTC](https://forums.fusetools.com/t/router-replacing-multiple-routes/4582/4 "2017-11-23T11:44:30Z")

</div>

There is another option to `modify` called `transition`. You can specify `transition: "Bypass"` to avoid any animation for a particular transition. You could perhaps consider using, along with `how: "Goto"` to recreate the history up to the final page, where a normal transition is used.

In upcoming versions you’ll be able to bind invidiual navigator histories to JavaScript arrays. This will allow you to play directly with the history, which should make such a thing easier.

I guess it’d be possible to introduce history modification functions as well. But hopefully the state driven history should be enough.

---

<div class="post-metadata">

**Author:** ![Luke](https://avatars.discourse-cdn.com/v4/letter/l/7ab992/32.png) [@Luke](https://forums.fusetools.com/u/Luke)\
**Post date:** [November 23, 2017, 3:46pm UTC](https://forums.fusetools.com/t/router-replacing-multiple-routes/4582/5 "2017-11-23T15:46:37Z")

</div>

Ahh, good idea edA-qa mort-ora-y!

Also having them as manipulatable arrays sounds really useful!

I ended up writing this utility method for anyone else that needs it:

```auto
function setNewRoute(route){
	router.getRoute(function(currentRoute){
		currentRoute = currentRoute[currentRoute.length-2];
		for(var i=0;i<route.length-1;i++){
			router.modify({
				'how': i==0?'Goto':'Push',
				'transition': 'Bypass',
				'path': [route[i], {}]
			});
		}
		router.modify({
			'how': 'Push',
			'transition': 'Bypass',
			'path': [currentRoute, {}]
		});
		router.modify({
			'how': 'Replace',
			'path': [route[route.length-1], {}]
		});
	});
}

```

It allows you to completely replace the current route stack with a new one, and smoothly transition into it. Used like:

```auto
setNewRoute(['Page1','Page4']);

```

Cheers!