Question

我进行了搜索，但找不到解决方案。我只是在我的应用程序上设置路由，一旦我输入了to属性，它是JSX并被VS代码识别为用于路由的JSX属性，它开始出现错误，提示我需要指定to属性。仅当我将导航属性和导航栏和主页放入首页后，这种情况才会发生。我要做的就是创建链接到其他页面。我将包括所有相关代码。请帮忙！

err：您必须指定“至”属性

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;

我不明白为什么我会因为在早期在Mern堆栈中创建路由而对JSX产生错误的认识

0 个答案: