4

I have an integrated React app (it's integrated into an existing Flask app) and the entry to the React app is not on the site's root. The first URL that fires the React app is the '/active-items'.

However, other routes do not necessarily extend that path. Some of the routes are '/active-items/item/', while some are completely different, like '/item-selection'.

With that in mind, I'm trying to set up my React Router to provide a base component for each of those routes. Basically, any route that fires should have the 'App' component as the base component, and inside App component I have '{props.children}'.

I've tried several iterations of how the routes should look like, but with no luck.

My latest iteration is this:

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

App is rendered, but ActiveItems is not. Any ideas how should I approach this?

EDIT: I'm using react-router-dom v4.0.0

4

2 回答 2

7

原始答案

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
于 2017-03-21T17:01:56.723 回答
0

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

嵌套路由呈现为“嵌套”，这意味着父路由将呈现自身，然后呈现所有子路由，通常用于公共路由。

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

<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>
    )
  }
}

如您所见，根路由渲染一个公共页脚，然后渲染所有嵌套的子级。根目录内的所有路由也将呈现相同的页脚。

我认为你需要的是这样的：

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

查看 www.facundolarocca.com 以查看它的工作原理，您也会找到 repo。

让我知道它是否有效。

于 2017-03-21T17:02:11.270 回答