分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了React Router 与 Exact 和 Switch 无法正常工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React Router 与 Exact 和 Switch 无法正常工作？

开发过程中遇到React Router 与 Exact 和 Switch 无法正常工作的问题如何解决？下面主要结合日常开发的经验，给出你关于React Router 与 Exact 和 Switch 无法正常工作的解决方法建议，希望对你解决React Router 与 Exact 和 Switch 无法正常工作有所启发或帮助；

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

我正在使用“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);

解决方法

您的交换机首先匹配路由参数

      <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 进行测试

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

<Route exact path="/items/:id" component={ItemPagE} />
<Route exact path="/items/:id/edit" component={EditPagE} />

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

截图：

React Router 与 Exact 和 Switch 无法正常工作

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

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

您只需在项目页面上键入 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);