React Router 不能与 Exact 和 Switch 一起正常工作

Question

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

Answer 1

问题是 /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} />

Answer 2

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

      <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

进行测试

Answer 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);

React Router 不能与 Exact 和 Switch 一起正常工作

React Router is not working fine with Exact and Switch

javascript

routes

reactjs

react-router

react-router-dom