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.
Source: stackoverflow.com
Related Query
- Storing routes in a file and importing into App.js
- Declaring React Routes in a separate file and Importing
- How to make react available on whole app without importing it again and again in every jsx file
- read JSON file from local hard drive and parse into react app
- Iframes and React.js - How to embed a youtube video into my app
- Javascript: What is eslintcache file and why is always generated in create react app
- Importing react into pages in next.js (and also React and CRA apps)
- how to import HTML file into React component and use it as a component?
- Storing component into a variable and reuse it
- Converting Object into JSON and downloading as a .json file in React
- How to import a file into a react app that uses create react app as raw text?
- Nginx and Create React App (with React Router) full routes not working
- Importing CSS variables into a Typescript file
- Importing a CSS file to a react app in the head
- How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?
- Loading Sass and injecting CSS text into a parent document from a React app
- Importing React into js file using ES6
- Splitting up a Rails and React app into separate Docker containers?
- Read a File through FileReader Api and Convert it into json object
- Trying to retrieve an mp3 file stored in AWS S3 and load it into my React client as a Blob...it's not working
- Download file functionality for react and python app
- Function I am importing and calling isn't running in react app
- Use same .env file for server and client (react) app
- Importing Markdown file into React component in Gatsby
- how to import css file in react when generating static html and inject imported css into html head tag?
- Error while importing font or images file inside scss using Webpack 4 and react js
- Best way to proceed to have both public and private routes on a single web app using Keycloak and React router?
- React.createElement: type is invalid error after bundling and importing react component to another react app
- Simple react todo app and storing todos in firebase
- How can I inject a span into a string and have it printed in my react app as HTML
More Query from same tag
- React-leaflet custom component - context not being passed?
- auth0 isnt working, 404 error on callback
- How to add or remove children under parent array using react state?
- ReactJS - Using setInterval for decreasing timer
- Get pathname of from where user clicked in Next.JS
- Issue with pausing audio in Howler and react
- React 15, Typescript 2.2.1. How to cast types for functional/stateless components?
- How to fetch data from MySQL after POST completes
- Change navigation styles depending on current path in Gatsby.js
- Media queries are not reflecting while using Preact
- Could we compose different Redux applications to create a bigger one?
- Editing an onClick handler function to a react element in a node module that references a function in a prop in the top level Component file
- How to Style a React Child Component in a Parent Component in React?
- How do I use an image that was uploaded with mullter on mongodb in my react component?
- How can I delay useEffect Hook
- React - controlling async calls smartly without any side effect in complex applications
- Jest & react-router-dom: React.createElement: type is invalid -- expected a string (for built-in components) ... but got: undefined
- React 16.3 Context: expected a string (for built-in components) or a class/function (for composite components) but got: object
- Having trouble iterating through a json array in react
- React subcomponent doesn't re-render when array prop changes
- Next.js - Error: only absolute urls are supported
- Redux state not changing in MUI switch button
- React + Typescript: setTimeout in For Loop is not populating array consecutively, or at all
- bootstrap columns not working in react js application
- Jest Unexpected identifier: React
- React Hooks - How to test changes on global providers
- Only Root Route is being rendered. IndexRoute Not Rendering Components
- React Js Uncaught (in promise) TypeError: Cannot read property of undefined
- React Material-UI tap event issues using while using "react-tap-event-plugin": "^1.0.0"
- useEffect - calling a function inside setInterval