Topic: Problem wit React Tabs
Codewave pro asked 6 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
Add comment
Jakub Mandra staff answered 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: 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
Tags