Create-React-App：路由器在链接

问题描述：

中被标记为需要我在一个组件中的反应路由器中遇到链接问题。一旦我尝试使用链接，控制台将显示此错误：失败的上下文类型：上下文router在Link中被标记为需要，但其值为undefined。我在这里看到过关于这个问题的所有类似的线程，但是对于这个确切的问题没有解决方案。我使用所有框架和组件的所有最新版本（几天前刚刚下载了所有内容），所以它绝对不是升级任何东西。Create-React-App：路由器在链接

的结构是这样的： index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import { BrowserRouter as Router, Route} from 'react-router-dom'; 
import { Link } from 'react-router-dom'; 
import About from './components/About'; 
import Posting from './components/Posting'; 
import Groups from './components/Groups'; 


ReactDOM.render(<App />, document.getElementById('app')); 
ReactDOM.render(
    <Router> 
     <div> 
      <Route exact path='/' component={About} /> 
      <Route path='/post' component={Posting} /> 
      <Route path='/groups' component={Groups} /> 
     </div> 
    </Router>, 
    document.getElementById('content') 
); 
registerServiceWorker();

App.js

import React, { Component } from 'react'; 
import { BrowserRouter as Router, Route} from 'react-router-dom'; 
import { Link } from 'react-router-dom'; 
import SideMenuUserInfo from './components/sidemenu/SideMenuUserInfo'; 
import SideMenu from './components/sidemenu/SideMenu'; 
import SideMenuFooter from "./components/sidemenu/SideMenuFooter"; 
import TopNav from "./components/topnav/TopNav"; 

class App extends Component { 
    render() { 
     return(
      <div className="main_container"> 
       <div className="col-md-3 left_col"> 
        <div className="left_col scroll-view"> 
         <div className="navbar nav_title" style={{border: 0}}> 
          <a href="index.html" className="site_title"><i className="fa fa-paw"></i> <span>Logo here</span></a> 
         </div> 
         <div className="clearfix"></div> 
         <SideMenuUserInfo /> 
         <br /> 
         <SideMenu /> 
         <SideMenuFooter /> 
        </div> 
       </div> 
       <TopNav /> 
       <div id="content" className="right_col" role="main"> 

       </div> 
       <footer> 
        <div className="pull-right"> 
         Footer text here 
        </div> 
        <div className="clearfix"></div> 
       </footer> 
      </div> 
     ); 
    } 
} 
export default App;

SideMenuUnfoldLink.js

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

class SideMenuUnfoldLink extends Component { 

    render() { 

     return(
      <li> 
       <a> 
        <i className={this.props.faClass}></i>{this.props.text}<span className="fa fa-chevron-down"></span> 
       </a> 
       <ul className="nav child_menu"> 
        <li><Link to="/">Home</Link></li> <<<<-- THE PROBLEM IS HERE 
       </ul> 
      </li> 
     ); 
    }; 
} 
export default SideMenuUnfoldLink;

而且About.js（作为工作例子的链接）

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

class About extends Component { 
    render() { 
    return (
     <div> 
      <h2>Это About</h2> 
      <ul> 
      <li><Link to="/groups">Groups</Link></li> 
      <li><Link to="/">Main</Link></li> 
      </ul> 
     </div> 
    ); 
    } 
} 
export default About;

该链接与关于组件的魅力一起使用。一旦我在SideMenuUnfoldLink组件中使用链接，该错误就会开始弹出。我想在SideMenuUnfoldLink想要使用Link的时候路由器并没有被初始化。但是我怎么去解决呢？

答

我刚刚找到解决方案。它是包裹路由器围绕整个应用程序，使其可以像这样所有组件：

render() { 
     return(
      <Router> 
       <div className="main_container"> 
        <div className="col-md-3 left_col"> 
         <div className="left_col scroll-view"> 
          <div className="navbar nav_title" style={{border: 0}}> 
           <a href="index.html" className="site_title"><i className="fa fa-paw"></i> <span>Logo here</span></a> 
          </div> 
          <div className="clearfix"></div> 
          <SideMenuUserInfo /> 
          <br /> 
          <SideMenu /> 
          <SideMenuFooter /> 
         </div> 
        </div> 
        <TopNav /> 
        <div id="content" className="right_col" role="main"> 

        </div> 
        <footer> 
         <div className="pull-right"> 
          Footer text here 
         </div> 
         <div className="clearfix"></div> 
        </footer> 
       </div> 
      </Router> 
     ); 
    }

当然和删除这一部分：

ReactDOM.render(
    <Router> 
     <div> 
      <Route exact path='/' component={About} /> 
      <Route path='/post' component={Posting} /> 
      <Route path='/groups' component={Groups} /> 
     </div> 
    </Router>, 
    document.getElementById('content') 
);

这里有一个更详细的解释https://reacttraining.com/react-router/ 地段感谢那个视频的作者:)

Create-React-App：路由器在链接

相关推荐