如何在不使用'exact'参数的情况下在反应路由器dom中构造路由？答案

【问题标题】：How to structure routing in react router dom without using the 'exact' parameter?如何在不使用'exact'参数的情况下在反应路由器dom中构造路由？
【发布时间】：2021-08-06 12:27:39
【问题描述】：

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

有没有办法保持如下所示的当前路由功能，但不在主路由上使用“精确”？（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 页面上，而它应该位于单独的页面/路由上。

这可能吗？干杯，马特

【问题讨论】：

将 home 路线设为最后，然后您可以从所有路线中删除确切的路线
@kenn 感谢您的回复。还是同样的问题，它只是先渲染登录组件，然后渲染它下面的主组件。我没有尝试使用“exact”的组件，除了 Home 之外的所有组件都使用了exact，但仍然是同样的问题
每条路由中都会有一个/，因此您在该路径中定义的任何组件都将始终在没有exact 的情况下呈现。将您的 Home 组件移动到具有唯一前缀的路径，那么您将不需要 exact。

标签： reactjs react-router react-router-dom

【解决方案1】：

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>

【讨论】：

您好，感谢您的回复。请看我上面的评论，当我点击登录链接时，登录和主页组件都会呈现在同一页面上