score:1

Accepted answer

maybe because you are calling a router inside another router, that is the problem. you should call only route.

you can modify app.js like below and try -

app.js

import react from 'react';
import membersrouter from "./members/membersrouter";

import {
  browserrouter as router,
  switch,
  route
} from 'react-router-dom';

function app() {

  return (
    <div classname="app">
      <membersrouter />
    </div>
  );
}

export default app;

and switch you can put in the membersrouter.js file like below -

membersrouter.js

import react from 'react';
import memberform from './memberform';
import memberstable from './memberstable';
import membershipform from './membershipform';
import membershiptable from './membershiptable';
import lockerrentalform from './lockerrentalform';
import lockerrentaltable from './lockerrentaltable';

import {
  browserrouter as router,
  switch,
  route
} from 'react-router-dom';

export default function membersrouter() {
    return (
        <>
          <switch>
            <route path="/member_form" component={ memberform } />
            <route path="/members_table" component={ memberstable} />
            <route path="/membership_form" component={ membershipform } />
            <route path="/membership_table" component={ membershiptable } />
            <route path="/locker_rental_form" component={ lockerrentalform } />
            <route path="/locker_rental_table" component={ lockerrentaltable } />
          </switch>
        </>
    );
}

and wrap your app from app.js in the router component, in the index.js file, something like this -

index.js

import app from './app' // correct according to location of app.js file

reactdom.render(
    <router>
      <app />
    </router>,
  document.getelementbyid('root')
)

you can check and remove the unused imports.

i never tried this way of segregating the routes. its very convenient to create routes wherever you need them instead of putting all in a single file.

it's untested, i am hoping it should work.


Related Query

More Query from same tag