React Router v4 - 嵌套路由问题

Question

我有以下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> 
    ) 
    } 
} 

这是渲染index.js：

import React from 'react'; 
import { render } from 'react-dom'; 
import { 
    BrowserRouter as Router, 
    Route 
} from 'react-router-dom'; 

import App from './components/App'; 

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

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

朝着App底部，你可以看到，我想有任何的Main组件或Search组件呈现以下<Title/>和<SearchBar/>基于路径/或/search。据我可以从React-Router文档中知道，我正在做他们的示例应用程序中显示的内容，但是我无法使其正常工作。使用此当前设置Main在/呈现罚款，但在导航到/search时，在<Root/>内没有呈现任何内容。我也尝试在<Switch/>中包装这两个<Routes/>，但得到了相同的结果。我错过了什么吗？

Answer 1

你把一个exact Route放在你的index.js中。所以路线/search找不到方法。因此改为：

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