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>

App 已呈现，但 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

Answer 2

我认为你误解了 React-router 的工作方式。

渲染嵌套路由"Nested"，这意味着父路由将渲染自身，然后渲染所有子路由，通常用于公共路由。

这里有一个我现在正在使用的工作示例：

<Router history={browserHistory}>
  <Route path='/' component={Root}>
    <Route path='/examples/react-redux-websocket' component={App} />
    <Route path='/examples/react-redux-websocket/chat/:chatid/participant/:participantid' component={Chat} />
    <Route path='/examples/react-redux-websocket/chat/:chatid' component={Chat} />
    <Route path='/*' component={NoMatch} />
  </Route>
</Router>

class Root extends Component {
  render () {
    return (
      <div>
        {this.props.children}
        <Footer />
      </div>
    )
  }
}

如您所见，Root 路由渲染了一个通用的 Footer，然后是所有嵌套的子节点。 Root 内的所有路由也将呈现相同的页脚。

我想你需要的是这样的东西：

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

查看 www.facundolarocca.com 以查看它是否正常工作，您也会找到存储库。

如果有效请告诉我。

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

React Router with a custom root and a base component

reactjs

react-router

react-router-dom

原答案

更新答案（11 月 16 日）