Question

尝试设置简单的全局布局（App），并在App中渲染路径/apply。我一直收到警告：

您不应在同一路线中使用<Route component>和<Route children>; <Route children>将被忽略

我可以说100％适用于这种情况，但Google没有提出相关的答案/解决方案来解决我的问题。

Routes.jsx

import React from 'react';
import { render } from "react-dom";
import { Router, Route, IndexRoute } from "react-router";

import createBrowserHistory from "history/createBrowserHistory";
const history = createBrowserHistory();

// route components
import App from "./App.jsx";
import ApplyPage from "./pages/ApplyPage.jsx";

export const renderRoutes = () => (
  <Router history={history}>
      <Route path="/" component={App}>
        <Route path="apply" component={ApplyPage}/>
      </Route>
  </Router>
);

App.jsx

import React, { Component } from 'react'

import TopBar from "./components/TopBar.jsx"
import LeftMenuContainer from "./components/LeftMenuContainer.jsx"
import LivePurchases from "./components/LivePurchases.jsx"

export default class App extends Component {
    render() {
        console.log(this.props);
        return (
            <div className="App">
                <div className="flexWrapperGlobal">
                    <TopBar/>
                    <div className="contentContainer">
                        <LeftMenuContainer/>
                        <div className="bodyContainer">
                            <LivePurchases/>
                            <div className="siteContentContainer">
                                {this.props.children}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

ApplyPage.jsx

import React, { Component } from 'react'

export default class ApplyPage extends Component {
    render() {
        return (
        <div className="applyContainer">
            <div className="applySubContainer">
                <div className="applyBlock">
                    <h4>Seller Application</h4>
                    <form>
                        <h5>Roblox Account</h5>
                        <input type="text" placeholder="Username"/>
                        <h5>Selling Experience</h5>
                        <textarea type="text" placeholder="Selling Experience"/>
                        <h5>Extra Information</h5>
                        <textarea type="text" placeholder="Extra Information"/>
                    </form>
                    <a className="btn">Send</a>
                </div>
            </div>
        </div>
        )
    }
}

Answer 1

今天我遇到了同样的问题，在这里找到了解决方案：Nested Routes in v4

<App>
 <Route ....... />
 <Route ....... />
</App>

这对我有用。

Answer 2

找到答案，以防任何人遇到相同的例子。

您现在将路线嵌套到渲染的顶级对象中，在我的情况下App。

所以你必须将<Route path="/apply" component={ApplyPage} />移到App.jsx，就像这样：

render() {
    return (
        <div className="App">
            <div className="flexWrapperGlobal">
                <TopBar/>
                <div className="contentContainer">
                    <LeftMenuContainer/>
                    <div className="bodyContainer">
                        <LivePurchases/>
                        <div className="siteContentContainer">
                            <Route path="/apply" component={ApplyPage} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

React Nested Routes抛出错误 - 流星

2 个答案: