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

这似乎有效，但是，它 returns 控制台出错。

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

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

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

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

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

Render Same Component With Multiple Paths React Router Dom

javascript

reactjs

react-router-dom