使用多个路径渲染相同的组件 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} />