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

如何解决将路线存储在文件中并导入到App.js中

我正在尝试将路由存储在文件中，以使其更具模块化。我正在使用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,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/$',name='member_form'),url(r'^redesign/member_table/$',name='member_table'),url(r'^redesign/membership_form/$',name='membership_form'),url(r'^redesign/membership_table/$',name='membership_table'),url(r'^redesign/locker_rental_form/$',name='locker_rental_form'),url(r'^redesign/locker_rental_table/$',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

解决方法

可能是因为您正在另一个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,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')
)

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

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

未经测试，我希望它能工作。