Render Same Component With Multiple Paths 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

Possible duplicate of Multiple path names for a same component in React Router — Arnaud Christ
– Arnaud Christ, Commented Mar 12, 2019 at 8:59
@ArnaudChrist That is for react-router. The solution in that question is what I am using above, which is giving me an error in the console. — mcclosa
– mcclosa, Commented Mar 12, 2019 at 9:00
Did you try with the answer using regular expression string from Cameron in the mentioned post ? path="/(home|users|widgets)/" — Arnaud Christ
– Arnaud Christ, Commented Mar 12, 2019 at 9:03
Yes, just wasn't sure how to target / with regular expression? — mcclosa
– mcclosa, Commented Mar 12, 2019 at 13:31

Tholle · Accepted Answer · 2019-03-12 09:06:11Z

3

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>

answered Mar 12, 2019 at 9:06

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yasir Ali · Accepted Answer · 2020-04-17 13:27:39Z

3

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} />

answered Apr 17, 2020 at 13:27

Yasir Ali

1171 bronze badge

Collectives™ on Stack Overflow

Render Same Component With Multiple Paths React Router Dom

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related