将路由存储在文件中并导入 App.js

Question

我正在尝试将路线存储在一个文件中，以使它们更加模块化。我正在使用 BrowserRouter、Switch 和 Route。现在，组件没有显示在链接所在的页面上。我将 Django 用于后端，将 React 用于前端。这些应该是显示在顶部栏中的 URL，唯一的 Django URL 是 API。我需要实际的 URL，以便在导航栏中链接它们。

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">
      <Router>
        <Switch>
          <Route path="/memberships/redesign" component={ MembersRouter }/>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

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 (
        <Router>
          <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 } />
        </Router>
    );
}

Django URL 模式：

urlpatterns = [
    url(r'^redesign/$', ReactView.as_view(), name='member_index'),
    url(r'^redesign/member_form/$', ReactView.as_view(), name='member_form'),
    url(r'^redesign/member_table/$', ReactView.as_view(), name='member_table'),
    url(r'^redesign/membership_form/$', ReactView.as_view(), name='membership_form'),
    url(r'^redesign/membership_table/$', ReactView.as_view(), name='membership_table'),
    url(r'^redesign/locker_rental_form/$', ReactView.as_view(), name='locker_rental_form'),
    url(r'^redesign/locker_rental_table/$', ReactView.as_view(), name='locker_rental_table'),

    url(r'^api/make_member/$', redesign_member_form),
    url(r'^api/get_members/(?P<page>\d+)/$', redesign_members_table),

    url(r'^api/make_membership/$', redesign_membership_form),
    url(r'^api/get_memberships/(?P<page>\d+)/$', redesign_memberships_table),

    url(r'^api/make_locker_rental/$', redesign_locker_rental_form),
    url(r'^api/get_locker_rentals/(?P<page>\d+)/$', redesign_locker_rentals_table),

    url(r'^$', index),
]

BaseView 和 ReactView：

class BaseView(View):
    page_title = ""

    def get_navbar(self, user):
        return 'navbar/nav_template.html'

    def get_context_data(self, *args, **kwargs):
        context = super(BaseView, self).get_context_data(*args, **kwargs)
        context['navbar'] = self.get_navbar(self.request.user)

        return context

class ReactView(BaseView, TemplateView):
    template_name = 'redesign/react_dashboard.html'

    def get_context_data(self, **kwargs):
        context = super(ReactView, self).get_context_data(**kwargs)
        return context

Answer 1

可能是因为您在另一个Router 中调用Router，这就是问题所在。你应该只打电话给Route。

您可以像下面这样修改App.js并尝试-

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;

还有Switch，你可以像下面这样放入MembersRouter.js文件-

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

然后将App.js 中的App 包装在Router 组件中，在index.js 文件中，类似这样-

index.js

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

ReactDOM.render(
    <Router>
      <App />
    </Router>,
  document.getElementById('root')
)

您可以检查并删除未使用的导入。

我从未尝试过这种隔离路线的方式。在需要的地方创建路线非常方便，而不是将所有路线都放在一个文件中。

它未经测试，我希望它应该可以工作。