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

【问题标题】：Render Same Component With Multiple Paths React Router Dom使用多个路径渲染相同的组件 React Router Dom
【发布时间】：2019-08-02 16:28:16
【问题描述】：

我一直在寻找最简单的方法来渲染相同的组件，但从不同的路径。

我有以下内容，以便"/" 和"/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 可以做到吗？任何帮助将不胜感激

【问题讨论】：

Multiple path names for a same component in React Router的可能重复
@ArnaudChrist 那是给react-router的。该问题的解决方案是我在上面使用的，这在控制台中给了我一个错误。
您是否尝试过使用上述帖子中来自 Cameron 的正则表达式字符串的答案？ path="/(home|users|widgets)/"
是的，只是不确定如何使用正则表达式定位/？

标签： javascript reactjs react-router-dom

【解决方案1】：

您可以创建一个包含路径 / 和 /login 的数组，并在该数组上使用 map 为两个路径呈现相同的内容。

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

【讨论】：

【解决方案2】：

如果您希望在多个路由上呈现相同的组件，您可以通过将路径指定为正则表达式来做到这一点

假设您想为“Home”、“User”和“Contact”组件显示“Home”组件，那么这里是代码。

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

【讨论】：