使用多个路径渲染相同的组件 React Router Dom

Question

I was looking for the simplest way to render the same component but from different paths.

I have the following so that both "/" and "/login" render the Login component.

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;

This does appear to work, however, it returns an error in the console.

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

I'm trying to do this...

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

But with a shorter method, is this possible with react-router-dom ? Any help would be greatly appreciated

Answer 1

You could create an array that contains the paths / and /login and use map on that array to render the same thing for both paths.

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

Answer 2

If you wish to render the same component on the several routes, you can do this by specifying your path as a regular expression

lets say you want to display 'Home' component for 'Home', 'User' and 'Contact' components then here is code.

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