Reactjs 嵌套路由反应

我是一个新的反应，并试图有一个标题组件的每一页。我的头组件正在加载，但子组件未加载

Index.js

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

import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";

class App extends React.Component {

    render(){
     return (       
        <BrowserRouter >
            <Switch>
                <Route path="/" component={Root} >
                    <Route path="/user" component={User}/>
                    <Route path="/home" component={Home}/>           
                </Route>
            </Switch>
        </BrowserRouter>
     )  ;
    }
}

render(<App />,window.document.getElementById("app"));

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

import {Root} from "./components/Root";

class App extends React.Component {

    render(){
        return (
            <BrowserRouter >
                <Switch>
                    <Route path="/" component={Root} />
                </Switch>
            </BrowserRouter>
        )  ;
    }
}

render(<App />,window.document.getElementById("app"));

Root.js

import React from "react";
import {Header} from "./Header";

export class Root extends React.Component {
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                       dummy text{this.props.children}
                    </div>
                </div>
            </div>
        );
    }
}

import React from "react";
import {Header} from "./Header";
import { Route, Switch } from 'react-router-dom';

import {Home} from "./components/Home";
import {User} from "./components/User";

export class Root extends React.Component {
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        dummy text{this.props.children}
                    </div>
                </div>
                <Switch>
                    <Route path="/user" component={User}/>
                    <Route path="/home" component={Home}/>
                </Switch>
            </div>
        );
    }
}

从“React”导入React；
从“/Header”导入{Header}；
导出类根扩展React.Component{
render（）{
返回(
虚拟文本{this.props.children}
);
}
}

Header.js

import React from "react";
export const Header =(props) => {
    return (
        <nav className="navbar navbar-default"> 
            <div className="container">
                <div className="navbar-header">
                    <ul className="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">User</a></li>
                    </ul>
                </div>    
            </div>
        </nav>
    );
};

从“React”导入React；
导出常量头=（道具）=>{
返回(




);
};

---

我可以看到虚拟文本，但是当我尝试/user或/home时，没有加载相应的页面。页面被刷新。

嵌套路由在react router v4中的工作方式不同。您应该将嵌套管线直接移动到

根
组件
渲染
方法中

Index.js

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

import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";

class App extends React.Component {

    render(){
     return (       
        <BrowserRouter >
            <Switch>
                <Route path="/" component={Root} >
                    <Route path="/user" component={User}/>
                    <Route path="/home" component={Home}/>           
                </Route>
            </Switch>
        </BrowserRouter>
     )  ;
    }
}

render(<App />,window.document.getElementById("app"));

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

import {Root} from "./components/Root";

class App extends React.Component {

    render(){
        return (
            <BrowserRouter >
                <Switch>
                    <Route path="/" component={Root} />
                </Switch>
            </BrowserRouter>
        )  ;
    }
}

render(<App />,window.document.getElementById("app"));

从“React”导入React；
从“react dom”导入{render}；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“/components/Root”导入{Root}；
类应用程序扩展了React.Component{
render（）{
返回(
)  ;
}
}
render（，window.document.getElementById（“app”）；

Root.js

import React from "react";
import {Header} from "./Header";

export class Root extends React.Component {
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                       dummy text{this.props.children}
                    </div>
                </div>
            </div>
        );
    }
}

import React from "react";
import {Header} from "./Header";
import { Route, Switch } from 'react-router-dom';

import {Home} from "./components/Home";
import {User} from "./components/User";

export class Root extends React.Component {
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        dummy text{this.props.children}
                    </div>
                </div>
                <Switch>
                    <Route path="/user" component={User}/>
                    <Route path="/home" component={Home}/>
                </Switch>
            </div>
        );
    }
}

从“React”导入React；
从“/Header”导入{Header}；
从“react router dom”导入{Route，Switch}；
从“/components/Home”导入{Home}；
从“/components/User”导入{User}；
导出类根扩展React.Component{
render（）{
返回(
虚拟文本{this.props.children}
);
}
}

Index.js
中的
开关将路由到
根
组件，该组件具有自己的
开关
，该开关将呈现与url匹配的第一个
路由。
嵌套路由在react router v4中的工作方式不同。您应该将嵌套管线直接移动到
根
组件
渲染
方法中

Index.js

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

import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";

class App extends React.Component {

    render(){
     return (       
        <BrowserRouter >
            <Switch>
                <Route path="/" component={Root} >
                    <Route path="/user" component={User}/>
                    <Route path="/home" component={Home}/>           
                </Route>
            </Switch>
        </BrowserRouter>
     )  ;
    }
}

render(<App />,window.document.getElementById("app"));

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

import {Root} from "./components/Root";

class App extends React.Component {

    render(){
        return (
            <BrowserRouter >
                <Switch>
                    <Route path="/" component={Root} />
                </Switch>
            </BrowserRouter>
        )  ;
    }
}

render(<App />,window.document.getElementById("app"));

从“React”导入React；
从“react dom”导入{render}；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“/components/Root”导入{Root}；
类应用程序扩展了React.Component{
render（）{
返回(
)  ;
}
}
render（，window.document.getElementById（“app”）；

Root.js

import React from "react";
import {Header} from "./Header";

export class Root extends React.Component {
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                       dummy text{this.props.children}
                    </div>
                </div>
            </div>
        );
    }
}

import React from "react";
import {Header} from "./Header";
import { Route, Switch } from 'react-router-dom';

import {Home} from "./components/Home";
import {User} from "./components/User";

export class Root extends React.Component {
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        dummy text{this.props.children}
                    </div>
                </div>
                <Switch>
                    <Route path="/user" component={User}/>
                    <Route path="/home" component={Home}/>
                </Switch>
            </div>
        );
    }
}

从“React”导入React；
从“/Header”导入{Header}；
从“react router dom”导入{Route，Switch}；
从“/components/Home”导入{Home}；
从“/components/User”导入{User}；
导出类根扩展React.Component{
render（）{
返回(
虚拟文本{this.props.children}
);
}
}

Index.js
中的
开关将路由到
Root
组件，该组件有自己的
开关
，该开关将呈现与url匹配的第一个
路由。
导航时控制台上有错误吗？标题的内容是什么？我得到了下面的警告“警告：您不应该使用和在同一路线上；将被忽略”，但没有警告控制台在您导航时出现任何错误？页眉的内容是什么？我收到下面的警告“警告：您不应该使用和在同一路线中；将被忽略”，但没有警告如果我还想添加页脚和页眉，应该怎么做您可以在
开关下添加另一个div
并添加
页脚
组件。您可以在此处复制/粘贴
标题的标记，并切换出组件。如果我还想在标题下添加页脚，该怎么办您可以在
开关下添加另一个div，然后添加
页脚
组件。您可以在此处复制/粘贴
标题的标记
，并切换出组件。