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

Question

我试图将路由存储在一个文件中，以使它们更加模块化。我正在使用BrowserRouter、交换机和路由。现在，组件没有显示在链接所在的页面上。我用Django做后端，用Reactivefor前端。这些应该是显示在顶部栏中的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从App.js中封装到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')
)

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

我从来没有尝试过这种隔离路线的方法。在任何需要的地方创建路由都非常方便，而不是把所有的路径都放在一个文件中。

这是未经测试的，我希望它能起作用。