Question

我最近在我的路由中实现了react-router Switch组件，以便呈现NoMatch组件（这只是一个404错误组件）。然而，在我的路线中实现这一点之后，我注意到在我的主页上只有1个组件将呈现，标题组件。

Heading和SearchBar都应呈现为相同的路径。

我的代码如下：

const routes = [
  {
    path: "/",                   
    exact: true,
    component: () => <Heading />
  },
  {
    path: "/",                      
    exact: true,
    component: () => <SearchBar />
  },
  {
    component: NoMatch
  }
];

class App extends Component {

  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <MenuBar />
            <Switch>
              {routes.map((route, index) =>
                <Route
                  key={index}
                  path={route.path}
                  exact={route.exact}
                  component={route.component}
                />
              )}
            </Switch>
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

我注意到如果删除Switch组件，那么一切都会正常渲染，但NoMatch组件也会渲染到路径。

问题：为什么我不能在Switch内部的同一路径上渲染多个组件？当我需要在“/”路径上呈现标题和SearchBar组件时，如何解决此问题？

Answer 1

我认为你错过了Switch如何工作。

Switch将开始寻找匹配的Route，只要找到匹配，它就会停止寻找匹配并渲染该特定组件。

始终定义唯一路径，如果要为同一路径渲染多个组件，则用div包装所有路径。

像这样写：

const routes = [
  {
    path: "/",                   
    exact: true,
    component: () => <div> <Heading /> <SearchBar /> </div>
  },
  {
    component: NoMatch
  }
];

Answer 2

Switch组件只允许一条路由 - 基本上每条子路由都有一个隐式exact属性。

所以你需要为了你的目的删除它，你的实验证实了

React-Router Switch组件不渲染具有相同路径的组件

2 个答案: