具有自定义根和基本组件的React Router

Question

我有一个集成的React应用程序（已集成到现有的Flask应用程序中），并且React应用程序的条目不在站点的根目录中。触发React应用的第一个URL是'/ active-items'。

然而，其他路线并不一定延伸这条道路。有些路线是“ / active-items / item /”，而有些则完全不同，例如“ / item-selection”。

考虑到这一点，我试图设置我的React Router为每个路由提供一个基本组件。基本上，任何触发的路由都应将“ App”组件作为基本组件，而在App组件内部，我应使用“ {props.children}”。

我已经尝试过几次迭代，以了解路线的外观，但是没有运气。

我最新的迭代是这样的：

<Router>
  <div>
    <Route path='/' component={App}>
      <Route path='active-items' component={ActiveItems} />
    </Route>
  </div>
</Router>

应用已呈现，但ActiveItems未呈现。有什么想法我应该如何处理？

编辑：我正在使用react-router-dom v4.0.0

Answer 1

原始答案

React Router的版本4有很多重大更改。您不能再以这种方式使用嵌套路由。使用新版本的React Router查看此嵌套路由示例。

const Header = () => (
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </nav>
)

const Footer = () => (
  <footer>
    Copyrights
  </footer>
)

const Layout = props => (
  <div className="layout">
    <div className="layout__container">
      <Header />{ props.children }
      <Footer />
    </div>
  </div>
)

const Home = () => <Layout>This is the home page.</Layout>
const About = () => <Layout>This is the about page.</Layout>

<Router>
  <div>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

希望能帮助到你。

更新的答案（11月16日）

这是我实际上正在做的。

import { BrowserRouter, Route, Switch } from 'react-router-dom'
import React from 'react'

import About from './components/views/About'
import Home from './components/views/Home'
import Layout from './components/views/Layout'

const Routes = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
      </Switch>
    </Layout>
  </BrowserRouter>
)

export default Routes