Javascript 使用多个路径渲染同一组件

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

我有以下内容，以便

“/”

和

“/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;

---

但是，如果使用较短的方法，使用

react-router-dom

是否可以实现这一点？非常感谢您提供的任何帮助

您可以创建一个包含路径

/

和

/login

的数组，并在该数组上为两个路径呈现相同的内容

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

{[“/”，“/login”].map（路径=>(
}
/>
))}

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

假设您想为“主页”、“用户”和“联系人”组件显示“主页”组件，下面是代码

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

react路由器的@ArnaudChrist可能重复。这个问题的解决方案是我在上面使用的，这在控制台中给了我一个错误。你在上面提到的帖子中使用Cameron的正则表达式字符串尝试过答案吗

path=“/（home | users | widgets）/”

是的，只是不确定如何使用正则表达式定位

/

？

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