React router:将扩展路径保存为路由参数

时间:2016-12-23 16:40:02

标签: javascript reactjs react-router

我希望有一条看起来像这样的路径:

/projects/:projectId/:folder1/:folder2/.../:folderN/:currentFolder/

其中projectId将是1之类的单个字符串,而folder1, folder2, ..., folderN来自于在该位置拆分路径。

所以像这样的正则表达式会完全匹配它:

/\/?projects\/(\w|\d)+\/folders\/((\w|\d)*\/?)*(\w|\d)+\/?/;

但是,我在将当前文件夹之前的文件夹路径保存为路径中的参数时遇到问题。也就是说,我可以获得:projectId:currentFolder之类的内容,但我希望将当前文件夹中的文件夹列表保存为:path或其他内容。

在react路由器中保存此任意路径的语法是什么?

1 个答案:

答案 0 :(得分:1)

Params仅匹配URL segments

对于不确定数量的文件夹,除了拥有N路由(其中N是已知的最大可能文件夹数)之外,没有实际的方法可以使用params。这样做当然会很乏味,并且如果N在没有添加更多路线的情况下增加params.splat就会中断。

最好的办法是使用通配符运算符匹配所有文件夹,然后在需要访问文件夹的<Route path=":productId/**/:currentFolder" component={Folder} /> 值上进行字符串拆分。

/17/this/is/the/path/to/the/folder

给出路​​径名:const Folder = ({ params }) => { const { productId, splat, currentFolder } = params const folders = splat.split('/') // productId = '17' // currentFolder = 'folder' // folders = ['this', 'is', 'the', 'path', 'to', 'the'] ... }

function toggle_fullscreen(c)
    c.fullscreen = not c.fullscreen
    --TODO store the existing ontop state
    c.ontop      = c.fullscreen
    c:raise()
end