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道具

您需要像

一样使用它

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

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

Answer 2

您需要在React-Router v4中为嵌套路由使用渲染。这样的事情。

<Router history={history}>
            <Route path="/" render={() => (
              <div>
                <Route path="/" component={HomeView} />
                <Route exact path="/search" component={Search}/>
              </div>
            )}/>
      </Router>

使用类组件

2 个答案: