Hello,
I have been using Koute to make a plugin, however I have struct a obstacle that is kind of hard to solve without modifying the codebase of Koute itself, or with another workaround which I will write later in this post.
Basically, I was trying to nest a sub-app separate from main app, however since Router class seems to store the route information in the shared metatable, if I create more than one Router class, calling set on one Router results in all routers also rendering that same page.
Right now, the only workaround I have is to require a clone of Koute module instead of requiring the original Koute module, which I would like to avoid as much as possible since it doesn’t scale well
Any response is appreciated 
Reproduction file: (Left 2 panels uses classes from same Koute package, thus route change in one panel also affects the other panel, instantiating same colour panel even though 2 panels doesn’t share same route to begin with! Meanwhile, the right 2 panels each uses its own clone of Koute package, thus the colour changes independently.)
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local WallyPackages = ReplicatedStorage:WaitForChild("WallyPackages")
local Fusion = require(WallyPackages:WaitForChild("Fusion"))
local New = Fusion.New
local Children = Fusion.Children
local KoutePackage = WallyPackages:WaitForChild("_Index"):WaitForChild("7kayoh_koute@1.0.2")
local routeNames = {
[1] = {
"/red",
"/blue"
},
[2] = {
"/green",
"/yellow"
}
}
local function colourFrame(props)
return New "Frame" {
Size = UDim2.fromScale(1, 1),
BackgroundColor3 = props.colour
}
end
local function runOnSameKouteModule()
local Koute = require(KoutePackage:WaitForChild("koute"))
local CanvasClass = Koute.Canvas
local RouterClass = Koute.Router
local RouteClass = Koute.Route
local routers = {}
-- Observe that routers[1] ONLY Has Red and Blue as its route
routers[1] = RouterClass {
routes = {
RouteClass "/red" {
view = function()
return colourFrame {
colour = Color3.fromRGB(255, 0, 4)
}
end,
},
RouteClass "/blue" {
view = function()
return colourFrame {
colour = Color3.fromRGB(17, 88, 255)
}
end,
}
}
}
-- Observe that routers[2] ONLY has green and yellow as its route.
routers[2] = RouterClass {
routes = {
RouteClass "/green" {
view = function()
return colourFrame {
colour = Color3.fromRGB(13, 255, 0)
}
end,
},
RouteClass "/yellow" {
view = function()
return colourFrame {
colour = Color3.fromRGB(251, 255, 0)
}
end,
}
}
}
local screenGui = New "ScreenGui" {
[Children] = {
New "Frame" {
Position = UDim2.new(0, 0, 0, 0),
Size = UDim2.new(0.5, 0, 1, 0),
BackgroundTransparency = 1,
[Children] = {
New "Frame" {
Position = UDim2.new(0, 5, 0, 0),
Size = UDim2.new(0.5, -10, 1, 0),
[Children] = {
CanvasClass {
source = routers[1]
}
}
},
New "Frame" {
Position = UDim2.new(0.5, 5, 0, 0),
Size = UDim2.new(0.5, -10, 1, 0),
[Children] = {
CanvasClass {
source = routers[2]
}
}
}
}
}
}
}
screenGui.Parent = Players.LocalPlayer.PlayerGui
task.spawn(function()
while task.wait(1) do
local routerRand = math.random(2)
local colourName = routeNames[routerRand][math.random(2)]
print("SameVer. router" .. tostring(routerRand) .. ": " .. colourName)
local router = routers[routerRand]
router:go(colourName)
end
end)
end
local function runOnDifferentKouteModule()
local KoutePackage1 = KoutePackage:Clone()
KoutePackage1.Parent = WallyPackages:WaitForChild("_Index")
local KoutePackage2 = KoutePackage:Clone()
KoutePackage2.Parent = WallyPackages:WaitForChild("_Index")
local Koute1 = require(KoutePackage1:WaitForChild("koute"))
local CanvasClass1 = Koute1.Canvas
local RouterClass1 = Koute1.Router
local RouteClass1 = Koute1.Route
local Koute2 = require(KoutePackage2:WaitForChild("koute"))
local CanvasClass2 = Koute2.Canvas
local RouterClass2 = Koute2.Router
local RouteClass2 = Koute2.Route
local routers = {}
-- Observe that routers[1] ONLY Has Red and Blue as its route
routers[1] = RouterClass1 {
routes = {
RouteClass1 "/red" {
view = function()
return colourFrame {
colour = Color3.fromRGB(255, 0, 4)
}
end,
},
RouteClass1 "/blue" {
view = function()
return colourFrame {
colour = Color3.fromRGB(17, 88, 255)
}
end,
}
}
}
-- Observe that routers[2] ONLY has green and yellow as its route.
routers[2] = RouterClass2 {
routes = {
RouteClass2 "/green" {
view = function()
return colourFrame {
colour = Color3.fromRGB(13, 255, 0)
}
end,
},
RouteClass2 "/yellow" {
view = function()
return colourFrame {
colour = Color3.fromRGB(251, 255, 0)
}
end,
}
}
}
local screenGui = New "ScreenGui" {
[Children] = {
New "Frame" {
Position = UDim2.new(0.5, 0, 0, 0),
Size = UDim2.new(0.5, 0, 1, 0),
BackgroundTransparency = 1,
[Children] = {
router1 = New "Frame" {
Position = UDim2.new(0, 5, 0, 0),
Size = UDim2.new(0.5, -10, 1, 0),
[Children] = {
CanvasClass1 {
source = routers[1]
}
}
},
router2 = New "Frame" {
Position = UDim2.new(0.5, 5, 0, 0),
Size = UDim2.new(0.5, -10, 1, 0),
BackgroundTransparency = 1,
[Children] = {
CanvasClass2 {
source = routers[2]
}
}
}
}
}
}
}
screenGui.Parent = Players.LocalPlayer.PlayerGui
task.spawn(function()
while task.wait(1) do
local routerRand = math.random(2)
local colourName = routeNames[routerRand][math.random(2)]
print("Diff ver. router" .. tostring(routerRand) .. ": " .. colourName)
local router = routers[routerRand]
router:go(colourName)
end
end)
end
runOnSameKouteModule()
runOnDifferentKouteModule()
