React Router 无法与 Exact 和 Switch 一起正常工作答案

【问题标题】：React Router is not working fine with Exact and SwitchReact Router 无法与 Exact 和 Switch 一起正常工作
【发布时间】：2021-08-02 13:49:49
【问题描述】：

我要做的是在编辑页面上，我首先搜索该项目，然后对其进行编辑。因此，每当我转到“/items/edit”时，它也会呈现 ItemPage('/items/:id') 页面。有没有办法解决这个问题，或者我必须将编辑页面的链接更改为“项目编辑”。

我正在使用“react-router-dom”，我的路由文件看起来像这样。

// Relative imports
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

// Absolute imports
import YourReactComp from './YourReactComp.jsx';

const root = document.getElementById('root');

const MainPage= () => (
  <div>Main Page</div>
);


const const ItemPage= () => (
  <div>Item Page</div>
);

const EditPage= () => (
  <div>Edit Page</div>
);

const NoMatch = () => (
  <p>No Match</p>
);

const RoutedApp = () => (
  <BrowserRouter >
    <Switch>
      <Route exact path="/items/:id" component={ItemPage} />
      <Route exact path="/items/edit" component={EditPage} />          
      <Route path="/yourReactComp" component={YourReactComp} />        
      <Route path="*" component={NoMatch} />          
    </Switch>
  </BrowserRouter>
);

ReactDOM.render(<RoutedApp />, root);

【问题讨论】：

你试过改变这两条路线的顺序吗？带参数的路由比带编辑的路由更通用。
@tswistak OP 似乎在说两条路线都在同时渲染。这不应该发生。
@yash 你能用codesandbox.io 创建一个样本吗？由于您的代码似乎完全正确。一次只能渲染ItemPage 和EditPage 中的任何一个，而不能同时渲染。
当然，我会做一个沙盒。
是的，我已经尝试更改顺序，也尝试更改确切的道具。

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

【解决方案1】：

您的开关首先匹配路由参数

      <Route exact path="/items/:id" component={ItemPage} />
      <Route exact path="/items/edit" component={EditPage} />

这是相同的路径，即edit 被认为是一个参数。以下应该可以工作。

    <Route exact path="/items/edit" component={EditPage} />
    <Route exact path="/items/:id" component={ItemPage} />

测试路径http://.../items/12,http://.../items/edit

【讨论】：

已经试过了。不适用于重新加载。即，如果我在书/编辑上重新加载页面，两个组合都会呈现。
我在上面的评论中看到你提到了 nginx，也许问题在那里？在您的代码示例中book/edit 是一个未定义的路由，它将显示 NoMatch
不，如果我注释掉 'items/:id' 路线，'items/edit' 会正常工作。是的，也许，在 nginx 中它们是一些问题。

【解决方案2】：

问题在于/items/edit 假定edit 为:id。您需要像这样更改路线：

<Route exact path="/items/:id" component={ItemPage} />
<Route exact path="/items/:id/edit" component={EditPage} />

所以，您可以像这样漂亮地添加其他路线。我为您提供了一个沙盒示例。 Click to view Sandbox

截图：

P.S：如果你坚持不提供id编辑页面，你需要彻底改变你的路线。比如这样：

<Route exact path="/item/:id" component={ItemPage} />
<Route exact path="/items/edit" component={EditPage} />

【讨论】：

是的，这会起作用。但我不想更改链接。但是如果我没有找到任何解决方案，我必须更改链接。 :|您提供的第一个解决方案也不适合我。与“书籍/编辑”一样，我正在搜索标题并在那里进行更新。
@YashJaiswal 您必须更改路线，因为没有其他解决方案。沙盒示例运行良好。我在答案中包含了一些屏幕截图。

【解决方案3】：

您只需在项目页面上键入 const 两次。它在我手上工作正常。你只需要改变以下路线的位置

   <Route exact  path="/items/edit" component={EditPage} />      
      <Route exact path="/items/:id" component={ItemPage} />



    // Relative imports
        import React from 'react';
        import ReactDOM from 'react-dom';
        import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
        
        // Absolute imports
        import YourReactComp from './YourReactComp.jsx';
        
        const root = document.getElementById('root');
        
        const MainPage= () => (
          <div>Main Page</div>
        );
        
        
        const  ItemPage= () => (
          <div>Item Page</div>
        );
        
        const EditPage= () => (
          <div>Edit Page</div>
        );
        
        const NoMatch = () => (
          <p>No Match</p>
        );
        
        const RoutedApp = () => (
           <BrowserRouter >
    <Switch>
      <Route exact  path="/items/edit" component={EditPage} />      
      <Route exact path="/items/:id" component={ItemPage} />
      <Route path="/yourReactComp" component={YourReactComp} />        
      <Route path="*" component={NoMatch} />          
    </Switch>
  </BrowserRouter>
        );
        
        ReactDOM.render(<RoutedApp />, root);

【讨论】：

没有。它不工作。在“items/edit”上重新加载，两个comp都会重新渲染。
好的。所以我想问题在于服务器端渲染，对我来说。感谢您的帮助！