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

时间:2017-09-02 02:19:21

标签: reactjs react-router

我最近在我的路由中实现了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组件时,如何解决此问题?

2 个答案:

答案 0 :(得分:2)

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

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

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

像这样写:

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

答案 1 :(得分:0)

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

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