Рендеринг одного и того же компонента с несколькими путями React Router Dom

Question

Я искал самый простой способ визуализации одного и того же компонента, но с разных путей.

У меня есть следующее, так что "/" и "/login" визуализируют компонент 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>