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

渲染具有多个路径的相同组件React Router Dom

2 个答案: