Question

我正在使用React BoilerPlate从头开始构建我的第一个React应用程序。我的路线遇到问题。

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>
  )
}

从本质上讲，我的Main组件具有我要包装在整个网站上的所有主要内容（导航栏，车身样式等）。以及内部呈现的任何组件。

每个其他组件上都有一个表单，当我走到其中任何一条路径时，我只会看到我的主要内容，而看不到我的表单。我究竟做错了什么。

这是我在控制台中遇到的唯一错误：

您不应使用和路线;将被忽略

这似乎可能是相关的，但我似乎找到了许多以这种方式进行操作的人的示例，而我似乎无法以任何方式使其工作。

Answer 1

您在路线组件中缺少“精确”。采用 <Route exact path="/jobs/new" component={NewJobPage} /> 转到该页面而不是<Route path="/jobs/new" component={NewJobPage} />

检查React : difference between <Route exact path="/" /> and <Route path="/" /> 以获得更多了解。

希望这会有所帮助：）

我的主要组件中嵌套路线的问题

1 个答案: