Problem wit React Tabs


Topic: Problem wit React Tabs

Codewave pro asked 4 years ago

I copied example code for Tabs in React, but the only thing I see is an error that states "You must specify the "to" property". Full error stack:
You must specify the "to" property
invariant
node_modules/invariant/browser.js:34
Link.render
node_modules/react-router-dom/es/Link.js:114
finishClassComponent
node_modules/react-dom/cjs/react-dom.development.js:14899
updateClassComponent
node_modules/react-dom/cjs/react-dom.development.js:14863
beginWork
node_modules/react-dom/cjs/react-dom.development.js:15716
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:18750
workLoop
node_modules/react-dom/cjs/react-dom.development.js:18791
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:147
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:196
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:250
replayUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:17998
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:18909
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:19812
performWork
node_modules/react-dom/cjs/react-dom.development.js:19722
performSyncWork
node_modules/react-dom/cjs/react-dom.development.js:19696
requestWork
node_modules/react-dom/cjs/react-dom.development.js:19551
scheduleWork
node_modules/react-dom/cjs/react-dom.development.js:19358
scheduleRootUpdate
node_modules/react-dom/cjs/react-dom.development.js:20062
updateContainerAtExpirationTime
node_modules/react-dom/cjs/react-dom.development.js:20088
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:20156
ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render
node_modules/react-dom/cjs/react-dom.development.js:20435
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:20589
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:19939
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:20585
render
node_modules/react-dom/cjs/react-dom.development.js:20652
Module../src/index.js
src/index.js:30
  27 | // );
  28 | 
  29 | // ReactDOM.render(app, document.getElementById('root'));
> 30 | ReactDOM.render(<App/>, document.getElementById('root'));
  31 | 
  32 | // If you want your app to work offline and load faster, you can change
  33 | // unregister() to register() below. Note this comes with some pitfalls.
__webpack_require__
/var/www/repos/credit_agricole/hr_forms/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;
fn
/var/www/repos/credit_agricole/hr_forms/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
0
http://localhost:3000/static/js/main.chunk.js:656:18
__webpack_require__
/var/www/repos/credit_agricole/hr_forms/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;
checkDeferredModules
/var/www/repos/credit_agricole/hr_forms/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;
Array.webpackJsonpCallback [as push]
/var/www/repos/credit_agricole/hr_forms/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;
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:57

Jakub Mandra staff premium answered 4 years ago

Hi there,

Our mistake in documentation - NavLink must have property `to` .

Add to="#" and role="tab" to every NavLink and it will work fine.

 

Thanks for pointing out, we are currently working on new documentation.

 

Best,

Jakub


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No