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

我正在尝试将路由存储在一个文件中，以使它们更加模块化。我正在使用浏览器路由器、交换机和路由。现在，组件没有显示在链接所在的页面上。我使用Django作为后端，React作为前端。这些应该是顶部栏中显示的URL，唯一的Django URL是API。我需要实际的URL，这样我就可以在导航栏中链接它们

App.js：

从“React”导入React；
从“/members/MembersRouter”导入MembersRouter；
进口{
BrowserRouter作为路由器，
转换
路线
}从“反应路由器dom”；
函数App（）{
返回(
);
}
导出默认应用程序；

MembersRouter.js：

从“React”导入React；
从“/MemberForm”导入MemberForm；
从“/MembersTable”导入MembersTable；
从“/MembershipForm”导入成员身份表单；
从“/MembershipTable”导入MembershipTable；
从“./LockerRentalForm”导入LockerRentalForm；
从“/LockerRentalTable”导入LockerRentalTable；
进口{
BrowserRouter作为路由器，
转换
路线
}从“反应路由器dom”；
导出默认函数MembersRouter（）{
返回(
);
}

Django URL模式：

urlpatterns=[
url（r“^redesign/$”，ReactView.as\u view（），name='member\u index'），
url（r“^redesign/member\u form/$”，ReactView.as\u view（），name='member\u form'），
url（r“^redesign/member\u table/$”，ReactView.as\u view（），name='member\u table'），
url（r'^redesign/membership\u form/$'，ReactView.as\u view（），name='membership\u form'），
url（r“^redesign/membership\u table/$”，ReactView.as\u view（），name='membership\u table'），
url（r“^redesign/locker\u rental\u form/$”，ReactView.as\u view（），name='locker\u rental\u form'），
url（r“^redesign/locker\u rental\u table/$”，ReactView.as\u view（），name='locker\u rental\u table'），
url（r“^api/make\u member/$”，重新设计成员表单），
url（r'^api/get_members/（？P\d+/$），重新设计成员表），
url（r“^api/make_membership/$”，重新设计成员资格表格），
url（r“^api/get_memberships/（？P\d+）/$”，重新设计成员资格表），
url（r“^api/make_locker_rental/$”，重新设计_locker_rental_表单），
url（r“^api/get_locker_rentals/（？P\d+）/$”，重新设计_locker_rentals_表），
url（r'^$'，索引），
]

BaseView和ReactView：

类基本视图（视图）：
page_title=“”
def get_导航栏（自身、用户）：
返回“navbar/nav_template.html”
def获取上下文数据（self、*args、**kwargs）：
context=super（BaseView，self）。获取上下文数据（*args，**kwargs）
上下文['navbar']=self.get\u navbar（self.request.user）
返回上下文
类视图（BaseView、TemplateView）：
template_name='redesign/react_dashboard.html'
def获取上下文数据（自身，**kwargs）：
context=super（ReactView，self）。获取上下文数据（**kwargs）
返回上下文

可能是因为您正在另一个

路由器内调用
路由器
，这就是问题所在。您应该只调用
路由

你可以像下面那样修改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;

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

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

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

然后将
App.js
中的
App
包装到
Router
组件中的
index.js
文件中，如下所示-

index.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;

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

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

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

import App from./App'//根据App.js文件的位置进行更正
ReactDOM.render(
,
document.getElementById（'root'））
)

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

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

它未经测试，我希望它能工作。
您在
MembersRouter
中没有
MembershipRouter
。你正在导出
MembersRouter
@Ejaz这太疯狂了，我没有因此而得到错误！我会修复它，看看它是否有效…@Ejaz仍然不起作用，但谢谢你指出这一点！你现在所说的
是什么意思，组件没有显示在链接所在的页面上。
？@Maxime组件将显示在带有导航栏的页面上导航栏在那里，但不是应该在路由器中传递的组件这一工作！唯一不同的是我在App.js中保留了
开关
，在
Index.js中没有做最后一点，但我会考虑这样做！