Question

我很反应并尝试使用react-router管理我的网络应用中的导航。我必须做错事，因为我的整个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;

NavRoutes.js

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;

当我让SideBarItem在其通常<NavLink>内生成<li>时出现问题：

SideBarItem.js

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;

当我保存这个时，整个DOM就会消失，不再有任何渲染了！

更新

我编辑了Container.js，以便SideBar现在是Router的孩子。

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

现在DOM渲染得很好，但点击NavLink不会改变路线：它会停留在仪表板上......

Answer 1

我设法让路由器正常工作！

按照thenormalsquid的建议，我编辑了Container.js，以便SideBar成为路由器的孩子。

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

然后我编辑了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-router：插入NavLink

1 个答案: