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

Question

I'm trying to store routes in a file to make them more modular. I am using BrowserRouter, Switch, and Route. Right now, the components are not showing up on the page where the links are. I am using Django for backend and React for front. These are supposed to be the URLs that show in the top bar, and the only Django URLs are the APIs. I need the actual URLs so I can link them in the navbar.

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 patterns:

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 and 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

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.