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/> 和 [=18= 下方] 基于路径 / 或 /search。据我从 React-Router 文档中得知，我正在做他们的示例应用程序中显示的内容，但我无法使其正常工作。使用此当前设置，Main 在 / 处呈现良好，但当导航到 /search 时，<Root/> 内没有任何内容呈现。我还尝试将这两个 <Routes/> 包装在 <Switch/> 中，但得到了相同的结果。我错过了什么吗？

Answer 1

你在index.js中放了一个exact Route。所以路由/search找不到路。所以改为：

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

React Router v4 - 嵌套路由问题

React Router v4 - Nesting Routes Issue

javascript

reactjs

react-router

react-router-v4