使用多個路徑渲染相同的組件 React Router Dom

Question

我一直在尋找從不同路徑渲染相同組件的最簡單方法。

我有以下內容，以便"/"和"/login"呈現登錄組件。

import React from "react";
import { Route, Switch, Redirect } from 'react-router-dom';
import './App.scss';
import Login from "../../login/Login";

const App = () => {

   return (
      <div className="App">
         <div className="App-container">
            <Switch>
               <Route exact path={["/", "/login"]} component={() => 
                  <Login login={true} />}/>
               <Redirect to="/" />
            </Switch>
         </div>
      </div>
   );

}

export default App;

這似乎確實有效，但是，它會在控制台中返回錯誤。

Warning: Failed prop type: Invalid prop 'path' of type 'array' supplied to 'Route', expected 'string'.

我正在努力做到這一點...

<Route exact path={"/"} component={() => <Login login={true} />}/>
<Route exact path={"/login"} component={() => <Login login={true} />}/>

但是使用更短的方法，這可能與react-router-dom嗎？ 任何幫助將不勝感激

Answer 1

您可以創建一個包含路徑/和/login的數組，並在該數組上使用map為兩個路徑呈現相同的內容。

<Switch>
  {["/", "/login"].map(path => (
    <Route
      key={path}
      exact
      path={path}
      render={() => <Login login={true} />}
    />
  ))}
  <Redirect to="/" />
</Switch>

Answer 2

如果您希望在多個路由上呈現相同的組件，您可以通過將路徑指定為正則表達式來實現

假設您想為“主頁”、“用戶”和“聯系人”組件顯示“主頁”組件，那么這里是代碼。

<Route path="/(home|users|contact)/" component={Home} />