javascript - 使用类组件在 React Router v4 中嵌套路由

Question

我知道这个问题已经得到解答，并且我阅读了有关嵌套路由的 React Router 文档，但我仍然看不出如何让它与我当前的 React 应用程序一起使用。使用 v4 嵌套路由的所有示例都带有功能组件。但是如果我有一个类组件并且需要嵌套一个路由怎么办？例如，我的主要应用程序组件位于 /。我想为位于 /search 的搜索页面添加路由我需要将该路由设置为嵌套路由(子路由？)，因为搜索页面需要从状态中读取，而状态只能从应用程序组件访问。所以我尝试了以下操作(注意底部的 <Route/>):

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

  // various methods that interact with state defined here

  render() {
    return (
      <div className="app-wrapper">
        <Title/>
        <SearchBar/>
        <ListPicker/>
        <ListPane/> 

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

这是 Search.js :

class Search extends React.Component {

  render() {
    return (
      <div className="search-wrapper">
        <SearchBar/>
        <ul className="search-results">

          /* Read state to populate list */

        </ul>
      </div>
    )
  }
}

然后我将路由定义为 App在 index.js :

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

render(<Root/>, document.getElementById('root'));

使用此设置，导航到 /search 时不会呈现任何内容.鉴于我的设置与我在网上找到的示例之间的差异，我不确定该怎么做。

Answer 1

没有任何东西被渲染，因为你指定和精确匹配路径 / 因此 /search 不匹配，只需从中删除 exact Prop 路线

你需要像这样使用它

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

render(<Root/>, document.getElementById('root'));