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時消失

回答

相關問題