Javascript React路由器v4-嵌套路由问题

我有以下

App

组件

class App extends React.Component {
  constructor() {
    super();
    this.state = {}
  }

  // various methods that interact with state defined here

  render() {
    const Main = () => (
      <div className="main-wrapper">
        <ListPicker/>
        <ListPane/>
      </div>
    );

    const Search = () => (
      <div className="search-wrapper">
        <ul className="search-results">
          <li>Search Results</li>
        </ul>
      </div>
    );

    return (
        <div className="app-wrapper">
          <Title/>
          <SearchBar listResults={this.listResults}/>

          <Route exact path="/" component={Main}/>
          <Route path="/search" component={Search}/>
        </div>
    )
  }
}

---

在

应用程序

的底部，您可以看到我正在尝试让

主

组件或

搜索

组件呈现在

下面，并基于路径

/

或

/Search

。从React Router文档中我可以看出，我正在做他们示例应用程序中显示的事情，但我无法让它正常工作。使用此当前设置，

Main

在

/

处渲染良好，但在导航到

/search

时，

内部没有任何渲染。我还尝试将这两个

包装在

中，但得到了相同的结果。我遗漏了什么吗？

您在index.js中添加了一条

精确路线。所以路线
/search
找不到路。因此，请改为：

const Root = () => {
  return (
    <Router>
      <div>
        <Route path="/" component={App}/>
      </div>
    </Router>
  )
};

constroot=（）=>{
返回(
)
};
Ugh！我知道这是显而易见的。非常感谢，亨里克：）
const Root = () => {
  return (
    <Router>
      <div>
        <Route path="/" component={App}/>
      </div>
    </Router>
  )
};