1

我在我的项目中使用 react-router-dom V4.1.1，我制作了不同的组件并使用了组件导航。

但我面临一个问题，遇到一些不可预测的错误。

请让我知道我在此缺少的解决方案

索引.js

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


ReactDOM.render(<App/>, document.getElementById('root'));
registerServiceWorker();

应用程序.js

import React, { Component } from 'react';
import Menu from './Menu';
import { BrowserRouter as Router, Route,Link,Switch } from 'react-router-dom';
import Home from './Home';
import Recipe from './Recipe';

class App extends Component {
  render() {
    return (
      <div>
      <Menu/>
      <hr/>
      <Router>
      <Switch>

  <Route  exact path="/" component={Home} />
    <Route path="/add-recipe" component={Recipe} />
    </Switch>
</Router>


</div>

    );
  }
}

export default App;

菜单.js

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

class Menu extends Component {
    render(){
        return(
                <nav className="navbar navbar-default navbar-fixed-top">
      <div className="container">
        <div className="navbar-header">
          <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span className="sr-only">Toggle navigation</span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
          </button>
          <a className="navbar-brand" href="#">Swiggy</a>
        </div>
        <div id="navbar" className="navbar-collapse collapse">

          <ul className="nav navbar-nav">

            <li className="active"><Link to="/">Home</Link></li>
            <li><Link to="/add-recipe">Submit Your recipe</Link></li>
          </ul>


        </div>
      </div>
    </nav>

            );
    }
}

export default Menu;

主页.js

import React,{Component} from 'react';

class Home extends Component {
    render(){
        return(
            <h1> Home Page</h1>
            );
    }
}
export default Home;

食谱.js

import React,{Component} from 'react';

class Recipe extends Component {
    render(){
        return(
            <h1> Recipe Page</h1>
            );
    }
}
export default Recipe;

控制台中的错误

  • 警告：上下文类型失败：上下文router在 中标记为必需Link，但其值为undefined。
  • 未捕获的类型错误：无法读取未定义的属性“历史”
4

0 回答 0