Javascript react路由器：插入NavLink时整个DOM消失_Javascript_Reactjs_Dom

Javascript react路由器：插入NavLink时整个DOM消失

javascript reactjs dom

Javascript react路由器：插入NavLink时整个DOM消失,javascript,reactjs,dom,Javascript,Reactjs,Dom,我是react新手，尝试使用react路由器管理web应用程序中的导航。我一定是做错了什么，因为我的整个DOM都消失了。当我设置路由器时，一切都很好： Container.js import React, {Component} from 'react'; import SideBar from "./sidebar/SideBar"; import Pagina from "./content/Pagina"; import { BrowserRouter as Router,

我是react新手，尝试使用react路由器管理web应用程序中的导航。我一定是做错了什么，因为我的整个DOM都消失了。当我设置路由器时，一切都很好：

Container.js

import React, {Component} from 'react';
import SideBar from "./sidebar/SideBar";
import Pagina from "./content/Pagina";
import {
    BrowserRouter as Router,
    NavLink
} from 'react-router-dom'
import NavRoutes from "./NavRoutes";

class Container extends Component {
    render() {
        return (
            <div id="MyLearningContainer" className ="container-fluid">
                <SideBar/>
                <Pagina/>
                <Router>
                    {NavRoutes}
                </Router>
            </div>
        );
    }
}


export default Container;

import React from 'react';
import {
    Route
} from 'react-router-dom';

import Dashboard from "./content/Dashboard";
import Utenti from "./content/Utenti";

const navRoutes = (
    <Route path="/" component= {Dashboard}>
        <Route path="utenti" component = {Utenti} />
    </Route>
);

export default navRoutes;

import React, {Component} from 'react';
import {
    NavLink
} from 'react-router-dom'


const defaultClass = {
    color: '#00338D',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20
};

const activeClass = {
    color: '#fff',
    backgroundColor: '#428bca',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20
};

class SideBarItem extends Component {
    render() {
        return (
            <li>
                <NavLink to={("/" + this.props.title).toLowerCase()}>
                    <span className={this.props.glyph}></span> {this.props.title}
                </NavLink>
            </li>
        );
    }
}

SideBarItem.defaultProps = {
    title: 'Undefined',
    glyph: 'glyphicon-home'
}


export default SideBarItem;

import React，{Component}来自'React'；
从“/SideBar/SideBar”导入侧边栏；
从“/content/Pagina”导入Pagina；
进口{
BrowserRouter作为路由器，
导航链接
}从“反应路由器dom”
从“/NavRoutes”导入导航路线；
类容器扩展组件{
render（）{
返回(
{NavRoutes}
);
}
}
导出默认容器；

NavRoutes.js

import React, {Component} from 'react';
import SideBar from "./sidebar/SideBar";
import Pagina from "./content/Pagina";
import {
    BrowserRouter as Router,
    NavLink
} from 'react-router-dom'
import NavRoutes from "./NavRoutes";

class Container extends Component {
    render() {
        return (
            <div id="MyLearningContainer" className ="container-fluid">
                <SideBar/>
                <Pagina/>
                <Router>
                    {NavRoutes}
                </Router>
            </div>
        );
    }
}


export default Container;

import React from 'react';
import {
    Route
} from 'react-router-dom';

import Dashboard from "./content/Dashboard";
import Utenti from "./content/Utenti";

const navRoutes = (
    <Route path="/" component= {Dashboard}>
        <Route path="utenti" component = {Utenti} />
    </Route>
);

export default navRoutes;

import React, {Component} from 'react';
import {
    NavLink
} from 'react-router-dom'


const defaultClass = {
    color: '#00338D',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20
};

const activeClass = {
    color: '#fff',
    backgroundColor: '#428bca',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20
};

class SideBarItem extends Component {
    render() {
        return (
            <li>
                <NavLink to={("/" + this.props.title).toLowerCase()}>
                    <span className={this.props.glyph}></span> {this.props.title}
                </NavLink>
            </li>
        );
    }
}

SideBarItem.defaultProps = {
    title: 'Undefined',
    glyph: 'glyphicon-home'
}


export default SideBarItem;

从“React”导入React；
进口{
路线
}从“反应路由器dom”；
从“/content/Dashboard”导入仪表板；
从“/content/uti”导入uti；
常数导航路径=(
);
导出默认导航路径；

当我让我的SideBarItem在其通常的

中生成

时，问题就出现了：
SideBarItem.js
import React, {Component} from 'react';
import SideBar from "./sidebar/SideBar";
import Pagina from "./content/Pagina";
import {
    BrowserRouter as Router,
    NavLink
} from 'react-router-dom'
import NavRoutes from "./NavRoutes";

class Container extends Component {
    render() {
        return (
            <div id="MyLearningContainer" className ="container-fluid">
                <SideBar/>
                <Pagina/>
                <Router>
                    {NavRoutes}
                </Router>
            </div>
        );
    }
}


export default Container;

import React from 'react';
import {
    Route
} from 'react-router-dom';

import Dashboard from "./content/Dashboard";
import Utenti from "./content/Utenti";

const navRoutes = (
    <Route path="/" component= {Dashboard}>
        <Route path="utenti" component = {Utenti} />
    </Route>
);

export default navRoutes;

import React, {Component} from 'react';
import {
    NavLink
} from 'react-router-dom'


const defaultClass = {
    color: '#00338D',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20
};

const activeClass = {
    color: '#fff',
    backgroundColor: '#428bca',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20
};

class SideBarItem extends Component {
    render() {
        return (
            <li>
                <NavLink to={("/" + this.props.title).toLowerCase()}>
                    <span className={this.props.glyph}></span> {this.props.title}
                </NavLink>
            </li>
        );
    }
}

SideBarItem.defaultProps = {
    title: 'Undefined',
    glyph: 'glyphicon-home'
}


export default SideBarItem;

import React，{Component}来自'React'；
进口{
导航链接
}从“反应路由器dom”
常量defaultClass={
颜色：“#00338D”，
paddingTop:10，
填充底部：10，
paddingLeft:20，
paddingRight:20
};
常量activeClass={
颜色：“#fff”，
背景颜色：“#428bca”，
paddingTop:10，
填充底部：10，
paddingLeft:20，
paddingRight:20
};
类SideBarItem扩展了组件{
render（）{
返回(

{this.props.title}

);
}
}
SideBarItem.defaultProps={
标题：“未定义”，
字形：“字形图标主页”
}
导出默认SideBarItem；

当我保存这个时，整个DOM就消失了，再也没有任何东西被渲染了

更新
我编辑了Container.js，所以侧栏现在是Router的子项
class Container extends Component {
    render() {
        return (
            <div id="MyLearningContainer" className="container-fluid">
                <Router>
                    <div>
                        <SideBar/>
                        {NavRoutes}
                    </div>
                </Router>
            </div>
        );
    }
}

class Container extends Component {
    render() {
        return (
            <div id="MyLearningContainer" className="container-fluid">
                <Router>
                    <div>
                        <SideBar/>
                        {NavRoutes}
                    </div>
                </Router>
            </div>
        );
    }
}

类容器扩展组件{
render（）{
返回(
{NavRoutes}
);
}
}

现在DOM呈现得很好，但单击导航链接不会改变路由：它停留在仪表板上…
我设法让路由器工作
按照normalsquid的建议，我编辑了Container.js，这样边栏就成了路由器的子项
class Container extends Component {
    render() {
        return (
            <div id="MyLearningContainer" className="container-fluid">
                <Router>
                    <div>
                        <SideBar/>
                        {NavRoutes}
                    </div>
                </Router>
            </div>
        );
    }
}

class Container extends Component {
    render() {
        return (
            <div id="MyLearningContainer" className="container-fluid">
                <Router>
                    <div>
                        <SideBar/>
                        {NavRoutes}
                    </div>
                </Router>
            </div>
        );
    }
}

类容器扩展组件{
render（）{
返回(
{NavRoutes}
);
}
}

然后我编辑了NavRoutes.js，它没有指向正确的链接
import React from 'react';
import {
    Route
} from 'react-router-dom';

import Dashboard from "./content/Dashboard";
import Utenti from "./content/Utenti";

const navRoutes = (
    <div>
        <Route path="/dashboard" component= {Dashboard}/>
        <Route path="/utenti" component = {Utenti} />
        <Route path="/corsi" component = {Corsi} />
    </div>
);

export default navRoutes;

从“React”导入React；
进口{
路线
}从“反应路由器dom”；
从“/content/Dashboard”导入仪表板；
从“/content/uti”导入uti；
常数导航路径=(
);
导出默认导航路径；

现在一切都很好，当你点击侧边栏链接时，页面会改变
 您的控制台中是否有任何错误？快速浏览，如果SideBarItem
是SideBar
的子项，则您的NavLink组件似乎位于组件之外，因为SideBar
是的同级项。他们需要是组件的子组件。不，我在控制台中没有收到任何错误。。。谢谢你！我不知道路由的链接必须在路由器内部，但现在我想起来，这是很明显的。现在DOM呈现，但单击导航链接不会显示路由（请参见更新后）。