Я не понимаю, почему я получаю ошибку, касающуюся JSX, которая объясняет это при создании маршрутов в моем стеке Mern - PullRequest
Новая
       32

Я не понимаю, почему я получаю ошибку, касающуюся JSX, которая объясняет это при создании маршрутов в моем стеке Mern

0 голосов
/ 12 октября 2018

Я искал и искал, но не могу найти решение.Я просто настраиваю маршруты в своем приложении реагирования, и как только я ввожу свойство to, которое является JSX и распознается кодом VS как свойство JSX для маршрутизации, оно выдает ошибку, говорящую о том, что мне нужно указать свойство to.Это произошло только после того, как я добавил свойства в панель навигации и домашнюю страницу.Все, что я хочу сделать, это создать ссылки, которые идут на другие мои страницы.Я включу весь связанный код.Пожалуйста помоги!

err: необходимо указать свойство "to" 

You must specify the "to" property
▶ 25 stack frames were collapsed.
Module../src/index.js
src/index.js:6
  3 | import App from './App';
  4 | import * as serviceWorker from './serviceWorker';
  5 | 
> 6 | ReactDOM.render(<App />, document.getElementById('root'));
  7 | 
  8 | // If you want your app to work offline and load faster, you can change
  9 | // unregister() to register() below. Note this comes with some pitfalls.
View compiled
__webpack_require__
/Users/jonathanschroeder/Applications/bandue6/client/webpack/bootstrap:782
  779 | };
  780 | 
  781 | // Execute the module function
> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  783 | 
  784 | // Flag the module as loaded
  785 | module.l = true;
View compiled
fn
/Users/jonathanschroeder/Applications/bandue6/client/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:1305:18
__webpack_require__
/Users/jonathanschroeder/Applications/bandue6/client/webpack/bootstrap:782
  779 | };
  780 | 
  781 | // Execute the module function
> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  783 | 
  784 | // Flag the module as loaded
  785 | module.l = true;
View compiled
checkDeferredModules
/Users/jonathanschroeder/Applications/bandue6/client/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | return result;
View compiled
Array.webpackJsonpCallback [as push]
/Users/jonathanschroeder/Applications/bandue6/client/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:57
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Navbar.js 

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

class Navbar extends Component {
  render() {
    return (
  <nav className="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
    <div className="container">
      <Link className="navbar-brand" href="/">Bandue</Link>
      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobile-nav">
        <span className="navbar-toggler-icon"></span>
      </button>

      <div className="collapse navbar-collapse" id="mobile-nav">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item">
            {/* <Link className="nav-link" to="/profiles"> Profiles
            </Link> */}
          </li>
        </ul>

        <ul className="navbar-nav ml-auto">
          <li className="nav-item">

             <Link className="nav-link" to="/register">Sign Up</Link>

          </li>
          <li className="nav-item">

            <Link className="nav-link" to="/login">Login</Link>

          </li>
        </ul>
      </div>
    </div>
  </nav>
    )
  }
}
export default Navbar;

App.js 

import React, { Component } from 'react';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import Register from './components/auth/Register';
import Login from './components/auth/Login';
import List from './components/List';
import ItemModal from './components/ItemModal'
import {Container} from 'reactstrap';
import { BrowserRouter as Router, Route } from 'react-router-dom';


import {Provider} from 'react-redux';
import store from './store';


import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import itemModal from './components/ItemModal';

class App extends Component {
  render() {
    return (
      <Provider store ={store}>
      <Router>
        <div className="App">
          <Navbar/>
            <Route exact path ="/" component = {Landing}/>
            <div className="container">
              <Route exact path ="/register" component = {Register}/>
              <Route exact path ="/login" component = {Login}/>
            </div>
          <Footer/>

        </div>
      </Router>
      </Provider>
    );
  }
}

export default App;

Landing.js 

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

class Landing extends Component {
  render() {
    return (
<div className="landing">
    <div className="dark-overlay landing-inner text-light">
      <div className="container">
        <div className="row">
          <div className="col-md-12 text-center">
            <h1 className="display-3 mb-4">Bandue
            </h1>
            <p className="lead"> Text </p>
            <hr />
            <Link to="/register" className="btn btn-lg btn-info mr-2">Sign Up</Link>
            <Link to="/login" className="btn btn-lg btn-light">Login</Link>
          </div>
        </div>
      </div>
    </div>
  </div>
    )
  }
}
export default Landing;
...