react-router：整个DOM在插入NavLink时消失

我是新来做出反应并试图通过react-router来管理我的web应用中的导航。虽然我必须做错事，因为我的整个DOM正在消失。一切都很好，而我设置路由器：react-router：整个DOM在插入NavLink时消失

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让侧边栏现在是路由器的一个孩子。

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

现在DOM渲染得很好，但点击NavLink不会使路由变化：它停留在仪表盘...

来源

2017-05-30 Caterina Bano

你的控制台中是否有错误？从侧面看，如果'SideBarItem'是'SideBar'的孩子，它看起来像你的NavLink组件在组件之外，因为'SideBar'是的兄弟。他们需要成为组件的子项。 – thenormalsquid

不，我在控制台中没有收到任何错误...谢谢！我不知道与路由器的链接必须位于路由器内部，但现在我想到了这一点非常明显。现在DOM呈现，但点击NavLinks不会使路线出现（请参阅帖子更新）。 –

我设法拿到了路由器的工作！

遵循thenormalsquid的建议，我编辑了Container.js，以便SideBar成为Router的子项。

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;

现在一切正常，当您点击侧边栏链接时页面会发生变化！

来源

2017-05-31 10:06:01

react-router：整个DOM在插入NavLink时消失

回答

相关问题