时间戳

首页 > 解决方案 > 如何在不使用'exact'参数的情况下在反应路由器dom中构建路由？

reactjs - 如何在不使用'exact'参数的情况下在反应路由器dom中构建路由？

问题描述

我正在尝试使用反应路由器设置模式路由。要使其在显示模态的路径后面工作，不能有“确切”参数。

有没有办法维护下面显示的当前路由功能，但不在主路由上使用“精确”？（Home 组件将创建模态路线）即。是否有另一种方法可以在反应路由器中进行此路由（使用更多交换机等？），从而我可以从主路由中省略“确切”并且所有内容仍将正确路由？

<BrowserRouter>
    <Switch>
        <MainLayout>
            <Route exact path='/' component={Home}/>
            <Route exact path='/login' component={Login}/>
            <Route exact path='/buy/:id' component={View}/>
            <PrivateRoute exact path='/dashboard' component={Dashboard}/>
        </MainLayout>
    </Switch>
</BrowserRouter>

例如，如果我在上面的代码中从 Home Route 中删除了“exact”参数，则 Login 组件将出现在 Home 页面上，而它应该位于单独的页面/路由上。

这可能吗？干杯，马特

标签： reactjsreact-routerreact-router-dom

解决方案

React 路由器返回第一个与 url 匹配的组件，即使它部分匹配所以 '/login' 和 '/' 都将部分和完全匹配第一个 url 并返回 Home 组件，这是不正确的。我认为更改路线的顺序将适用于您的情况

<Switch>  
    <MainLayout>  
        <Route path='/login' component={Login}/>  
        <Route path='/buy/:id' component={View}/>  
        <PrivateRoute path='/dashboard' component={Dashboard}/>  
        <Route path='/' component={Home}/>  
    </MainLayout>  
</Switch>

推荐阅读