score:-2

in your app.js file when you are importing the components make sure you write then in {}

like below

import {header} from './common/header';
import {homepage} from '../components/home/homepage';

this will resolve the issue.

if you have some default export components that you can mention without {}.

like below

import header from './common/header';

if you have multiple components in one js file, you can write as below

import header,{othercomponent1,othercomponent2} from './common/header';

score:0

anyone else having this problem, ensure you have an export default for any component you use in your route, else you will run into this error.

score:0

for those who encounter this type of issue. do not forget our best friend in javascript!

react has made it clear that you have a problem in the <app /> component, so first try to do console.log(app) in your index to see what it returns.

then dig down by removing components 1 by 1 in the <app /> to see which one causes the trouble.

score:1

for me it seemed like i had to remove the memoryrouter or connectedrouter in your case.

also, note that my issue was in my app.test.js file so it may not apply to op's specific use case but it might help those of you whom arrived here through google.

can someone please explain why this works?

this is the code that is now working:


<provider store={store}>
     <app />
</provider>

this is the original non-working code:


<provider store={store}>
    <connectedrouter history={history}>
        <app />
    </connectedrouter>
</provider>


Related Query

More Query from same tag