Issues with nesting routes inside my main component

Question

I'm building my first React app from scratch using React BoilerPlate for practice. I'm running into issues with my routes.

import React from 'react'
import { Router, Route } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory'

import ApplicationsPage from '../ApplicationsPage'
import CompanyApplicantsPage from '../CompanyApplicantsPage'
import CompanyJobsPage from '../CompanyJobsPage'
import CompanyLocationsPage from '../CompanyLocationsPage'
import CompanyPage from '../CompanyPage'
import CompanyRecruitersPage from '../CompanyRecruitersPage'
import CompanySettingsPage from '../CompanySettingsPage'
import EditResumePage from '../EditResumePage'
import EditCompanyPage from '../EditCompanyPage'
import EditJobPage from '../EditJobPage'
import EditProfilePage from '../EditProfilePage'
import JobPage from '../JobPage'
import JobsPage from '../JobsPage'
import NewCompanyPage from '../NewCompanyPage'
import NewJobPage from '../NewJobPage'
import NewProfilePage from '../NewProfilePage'
import NotFoundPage from '../NotFoundPage/Loadable'
import Main from '../Main'
import ProfilePage from '../ProfilePage'
import ProfileSettingsPage from '../ProfileSettingsPage'
import ProfilesPage from '../ProfilesPage'
import EditLocationPage from '../EditLocationPage'

export default function App() {
  const history = createBrowserHistory()

  return (
    <Router history={history}>
      <Route component={Main}>
        <Route path="/jobs" component={JobsPage} />
        <Route path="/jobs/new" component={NewJobPage} />
        <Route path="/jobs/:job_id" component={JobPage} />
        <Route path="/jobs/:job_id/edit" component={EditJobPage} />
        <Route path="/profiles" component={ProfilesPage} />
        <Route path="/profiles/new" component={NewProfilePage} />
        <Route path="/profiles/:profile_id" component={ProfilePage} />
        <Route path="/profiles/:profile_id/edit" component={EditProfilePage} />
        <Route path="/profiles/:profile_id/edit_resume" component={EditResumePage} />
        <Route path="/profiles/:profile_id/applications" component={ApplicationsPage} />
        <Route path="/profiles/:profile_id/settings" component={ProfileSettingsPage} />
        <Route path="/companies/new" component={NewCompanyPage} />
        <Route path="/companies/:company_id" component={CompanyPage} />
        <Route component={NotFoundPage} />
        <Route path="/companies/:company_id/edit" component={EditCompanyPage} />
        <Route path="/companies/:company_id/jobs" component={CompanyJobsPage} />
        <Route path="/companies/:company_id/locations" component={CompanyLocationsPage} />
        <Route path="/companies/:company_id/locations/location_id" component={EditLocationPage} />
        <Route path="/companies/:company_id/recruiters" component={CompanyRecruitersPage} />
        <Route path="/companies/:company_id/settings" component={CompanySettingsPage} />
        <Route path="/companies/:company_id/applicants" component={CompanyApplicantsPage} />
      </Route>
    </Router>
  )
}

Essentially, my Main component has all my main content that I want to wrap around the whole site (navbar, body styling etc.). And any component rendered inside.

Each of these other components have a form on them, and when I go to any one of these paths I only see my Main content, not my forms. What am I doing wrong.

This is the only error I have in the console:

You should not use and in the same route; will be ignored

Which seems like it could be related, but I seem to find a lot of examples of people doing it this way and I can't seem to make it work any way I try.

score 0 · Answer 1 · answered Jul 06 '18 at 02:24

0

You are missing "exact" in the route component. Use <Route exact path="/jobs/new" component={NewJobPage} /> to go to that particular page instead of <Route path="/jobs/new" component={NewJobPage} />

Check React : difference between <Route exact path="/" /> and <Route path="/" /> for more understanding.

Hope this helps :)

answered Jul 06 '18 at 02:24

Ajai Maxwel

21
6

That didn't seem to work, unfortunately. Now I am also getting a new error: Invalid prop `component` of type `object` supplied to `Route`, expected `function`. – Alysia Lynn Jul 06 '18 at 02:56
I believe this new error is due to unavailability of path in " " and " ". Also if your entry point is the main component, direct it to the home page, – Ajai Maxwel Jul 06 '18 at 03:20

Issues with nesting routes inside my main component

1 Answers1