路由渲染了错误的组件ReactJS

问题描述

调用URL / folders / xy后，我试图访问FolderDetail组件。我始终没有获得FolderDetail组件，而总是获得位于/ folders的Folders组件...请帮助。

import React from 'react';
import { browserRouter,Route,Switch } from 'react-router-dom';

    function App() {
      return (
        <browserRouter>
          <div className="App">
            <Navigation />
            <Switch>
              <Route path="/" component={Home} exact />
              <Route path="/folders" component={Folders} />
              <Route path="/folders/:id" component={FolderDetail} />
              <Route path="/login" component={Login} />
            </Switch>
          </div>
        </browserRouter>
      );
    }
    
    export default App;

解决方法

一个交换机采用第一个匹配的路由，因此您需要像这样重新排序路由（还添加exact）

 <Switch>
     <Route exact path="/folders/:id" component={FolderDetail} />
     <Route exact path="/folders" component={Folders} />
     <Route exact path="/login" component={Login} />
     <Route exact path="/" component={Home} exact />
 </Switch>

始终将更具体的路线放在首位。

,

您应该将exact添加到所有Routes组件，这是有效的codesandbox：

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        <Navigation />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/folders" component={Folders} />
          <Route exact path="/folders/:id" component={FolderDetail} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};