Question

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

结构如下： 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（作为Link的工作示例）

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;

Link可以像魅力一样使用About组件。在我的SideMenuUnfoldLink组件中使用Link后，错误开始弹出。我想当SideMenuUnfoldLink想要使用Link时，路由器才刚刚初始化。但我怎么能去做呢？

Answer 1

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

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：路由器在链接中标记为必需

1 个答案: