Reactjs 反应嵌套路径抛出错误-流星

正在尝试设置一个简单的全局布局（App），并在App中呈现路径

/apply

。 我不断得到警告：

您不应在同一路线中使用

和

<代码>将被忽略

我可以说这100%适用于这种情况，但谷歌没有给出我问题的相关答案/解决方案

Routes.jsx

从“React”导入React；
从“react dom”导入{render}；
从“react Router”导入{Router，Route，IndexRoute}；
从“历史记录/createBrowserHistory”导入createBrowserHistory；
const history=createBrowserHistory（）；
//路由组件
从“/App.jsx”导入应用程序；
从“/pages/ApplyPage.jsx”导入ApplyPage；
导出常量renderRoutes=（）=>(
);

App.jsx

import React，{Component}来自“React”
从“/components/TopBar.jsx”导入TopBar
从“/components/LeftMenuContainer.jsx”导入LeftMenuContainer
从“/components/LivePurchases.jsx”导入LivePurchases
导出默认类应用程序扩展组件{
render（）{
console.log（this.props）；
返回(
{this.props.children}
)
}
}

ApplyPage.jsx

import React，{Component}来自“React”
导出默认类ApplyPage扩展组件{
render（）{
返回(
卖方申请
Roblox账户
销售经验
额外信息
发送
)
}
}

找到了答案，以防有人遇到同样的例子

现在，在我的例子中，

App

将路由嵌套到渲染的顶级对象中

因此，您必须将

移动到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>
    )
}

render（）{
返回(
)
}

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

---

这对我很有用。

现在是否不需要添加

？它会只通过这样做来路由吗？可能重复的路由需要使用路由的“精确”属性使路由器区分/parent和/parent/child

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

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

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

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