Javascript 如何将React路由器拆分为多个文件

我的路由文件变得相当混乱，所以我决定将它们分割成单独的文件

我的问题是，如果我使用了两个单独的文件，则不会渲染第一个include之后的文件：

const routes = (
  <div>
    <Switch>
      <Route exact path="/" component={Home} />
      {Registration} //Does get rendered

      //Everything below this does not get a route
      {Faq}
      <Route path="/login" component={login} />
      <Route component={NoMatch} />
    </Switch>
  </div>
);

FaqRoutes.js

import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';

const Routes = (
  <Switch>
    <Route path="/login" component={Login} key="login" />,
    <Route path="/registration/introduction" component={Introduction} key="registration-intro" />
  </Switch>
);
export default Routes;

import Faq from '../containers/Faq';
import faqJson from '../json_content/faq/faq';
import FaqCategory from '../containers/Faq/faqCategory';

const Routes = (
  <Switch>
    <Route path="/faq/:category" component={FaqCategory} key="faqCat" />
    <Route path="/faq" render={props => <Faq data={faqJson} />} key="faq" />
  </Switch>
);
export default Routes;

import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';

const Routes = (
  <React.Fragment>
    <Route path="/login" component={Login} key="login" />,
    <Route path="/registration/introduction" component={Introduction} key="registration-intro" />
  </React.Fragment>
);
export default Routes;

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

import LandingPage from "../Registration";

const Home = () => {
  return <div>
  Home Component
   <Link to="/auth/login">Login</Link>
  </div>;
};

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/auth" component={LandingPage} />
        </Switch>
      </BrowserRouter>
    </div>
  ); 
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React, { Component } from 'react';
import { Switch, Route, Link, Redirect } from 'react-router-dom';
const LoginRegister = (props) => {
  return (
    <div>
      Login or register
    <Link to="/login">Login</Link>
      <br />
      <Link to="/signup" >Signup</Link>
    </div>
  );
}

const Login = (props) =>{
  console.log("login ", props);
  return (
    <div>
      Login Component
    <Link to="/auth/signup" >Signup</Link>
    </div>
  );
} 

const Signup = () => (
  <div>
  Signup component
    <Link to="/auth/login" >Login</Link>
  </div>
);

class LandingPage extends Component {

  render() {
    console.log('Landing page',this.props);
    const loginPath = this.props.match.path +'/login';
    const signupPath = this.props.match.path + '/signup';
    console.log(loginPath);
    return (
      <div className="container" >
      Landing page
        <Switch>
          <Route path={loginPath} component={Login} />
          <Route path={signupPath} component={Signup} />
          <Route path="/" exact component={LoginRegister} />
        </Switch>
      </div>
    );
  }

}

export default LandingPage;

从“../containers/Faq”导入Faq；
从“../json_content/faq/faq”导入faqJson；
从“../containers/Faq/FaqCategory”导入FaqCategory；
常数路由=(
}key=“常见问题”/>
);
导出默认路径；

尝试以下操作

RegistrationRoutes.js

import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';

const Routes = (
  <Switch>
    <Route path="/login" component={Login} key="login" />,
    <Route path="/registration/introduction" component={Introduction} key="registration-intro" />
  </Switch>
);
export default Routes;

import Faq from '../containers/Faq';
import faqJson from '../json_content/faq/faq';
import FaqCategory from '../containers/Faq/faqCategory';

const Routes = (
  <Switch>
    <Route path="/faq/:category" component={FaqCategory} key="faqCat" />
    <Route path="/faq" render={props => <Faq data={faqJson} />} key="faq" />
  </Switch>
);
export default Routes;

import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';

const Routes = (
  <React.Fragment>
    <Route path="/login" component={Login} key="login" />,
    <Route path="/registration/introduction" component={Introduction} key="registration-intro" />
  </React.Fragment>
);
export default Routes;

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

import LandingPage from "../Registration";

const Home = () => {
  return <div>
  Home Component
   <Link to="/auth/login">Login</Link>
  </div>;
};

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/auth" component={LandingPage} />
        </Switch>
      </BrowserRouter>
    </div>
  ); 
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React, { Component } from 'react';
import { Switch, Route, Link, Redirect } from 'react-router-dom';
const LoginRegister = (props) => {
  return (
    <div>
      Login or register
    <Link to="/login">Login</Link>
      <br />
      <Link to="/signup" >Signup</Link>
    </div>
  );
}

const Login = (props) =>{
  console.log("login ", props);
  return (
    <div>
      Login Component
    <Link to="/auth/signup" >Signup</Link>
    </div>
  );
} 

const Signup = () => (
  <div>
  Signup component
    <Link to="/auth/login" >Login</Link>
  </div>
);

class LandingPage extends Component {

  render() {
    console.log('Landing page',this.props);
    const loginPath = this.props.match.path +'/login';
    const signupPath = this.props.match.path + '/signup';
    console.log(loginPath);
    return (
      <div className="container" >
      Landing page
        <Switch>
          <Route path={loginPath} component={Login} />
          <Route path={signupPath} component={Signup} />
          <Route path="/" exact component={LoginRegister} />
        </Switch>
      </div>
    );
  }

}

export default LandingPage;

从“../containers/Registration/Introduction”导入简介；
从“../containers/Login”导入登录名；
常数路由=(
,
);
导出默认路径；

您的代码会被翻译成这样的内容

const routes = (
  <div>
    <Switch>
      <Route exact path="/" component={Home} />
      <Switch>
         <Route path="/login" component={Login} key="login" />,
         <Route path="/registration/introduction" 
             component={Introduction} key="registration-intro" />
      </Switch>

      //Everything below this does not get a route
      {Faq}
      <Route path="/login" component={login} />
      <Route component={NoMatch} />
    </Switch>
  </div>
);

Registration.js

import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';

const Routes = (
  <Switch>
    <Route path="/login" component={Login} key="login" />,
    <Route path="/registration/introduction" component={Introduction} key="registration-intro" />
  </Switch>
);
export default Routes;

import Faq from '../containers/Faq';
import faqJson from '../json_content/faq/faq';
import FaqCategory from '../containers/Faq/faqCategory';

const Routes = (
  <Switch>
    <Route path="/faq/:category" component={FaqCategory} key="faqCat" />
    <Route path="/faq" render={props => <Faq data={faqJson} />} key="faq" />
  </Switch>
);
export default Routes;

import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';

const Routes = (
  <React.Fragment>
    <Route path="/login" component={Login} key="login" />,
    <Route path="/registration/introduction" component={Introduction} key="registration-intro" />
  </React.Fragment>
);
export default Routes;

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

import LandingPage from "../Registration";

const Home = () => {
  return <div>
  Home Component
   <Link to="/auth/login">Login</Link>
  </div>;
};

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/auth" component={LandingPage} />
        </Switch>
      </BrowserRouter>
    </div>
  ); 
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React, { Component } from 'react';
import { Switch, Route, Link, Redirect } from 'react-router-dom';
const LoginRegister = (props) => {
  return (
    <div>
      Login or register
    <Link to="/login">Login</Link>
      <br />
      <Link to="/signup" >Signup</Link>
    </div>
  );
}

const Login = (props) =>{
  console.log("login ", props);
  return (
    <div>
      Login Component
    <Link to="/auth/signup" >Signup</Link>
    </div>
  );
} 

const Signup = () => (
  <div>
  Signup component
    <Link to="/auth/login" >Login</Link>
  </div>
);

class LandingPage extends Component {

  render() {
    console.log('Landing page',this.props);
    const loginPath = this.props.match.path +'/login';
    const signupPath = this.props.match.path + '/signup';
    console.log(loginPath);
    return (
      <div className="container" >
      Landing page
        <Switch>
          <Route path={loginPath} component={Login} />
          <Route path={signupPath} component={Signup} />
          <Route path="/" exact component={LoginRegister} />
        </Switch>
      </div>
    );
  }

}

export default LandingPage;

import React，{Component}来自'React'；
从“react router dom”导入{交换机、路由、链接、重定向}；
常量登录注册表=（道具）=>{
返回(
登录或注册
登录


报名
);
}
常量登录=（道具）=>{
日志（“登录”，道具）；
返回(
登录组件
报名
);
} 
常量注册=（）=>(
注册组件
登录
);
类LandingPage扩展组件{
render（）{
console.log（'Landing page'，this.props）；
const loginPath=this.props.match.path+'/login'；
const signupPath=this.props.match.path+'/signup'；
console.log（loginPath）；
返回(
登录页
);
}
}
导出默认登陆页面；

可能您可以将它们移动到配置文件中，然后从那里加载它们

App.tsx

---

这将使您的代码保持简单

我认为这与switch有关。您能否将路由封装在faq中，并将其注册在react.fragment父类中，而不是父开关中？然后再试一次？我假设您使用的是react路由器v4。你的代码只是产生了嵌套的开关结构，这造成了问题。如果你能在某处设置你的最小代码，我将能够帮助你。。。就像在沙盒上一样？谢谢你的回答：D我正在使用RR4。不幸的是，它仍然是相同的问题。FAQ下的所有内容都不会呈现。片段没有帮助