Reactjs 嵌套路由在React上不起作用

我正在尝试在我的节点应用程序中使用嵌套路由。最初，我在App.jsx中使用了所有路由，效果很好。我决定使用嵌套路由，以便更好地处理从子节点到父节点的数据

当我设置嵌套路由时，页面会转到url，但我的组件没有呈现。我将路由放回App.jsx，一切正常

我尝试了HashRouter而不是BrowserRouter，因为我的应用程序（目前）只呈现静态页面，但没有帮助

我还使用了下面链接中引用的更新拦截器，但唉，它也不起作用

请帮助这个新手

Index.jsx

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}

export default App;

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}
export default App;

import React, { Component } from "react";
import Home from "./HomePage";
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import Login from "./Login"
import SignUp from "./SignUp";


const LoginRouting = ({}) => (
  <Login>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route exact path="/Home" component={Home} />
      <Route exact path="/SignUp" component={SignUp} />
    </Switch>
  </Login>
);

export default LoginRouting;

import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import fetch from "isomorphic-fetch";
import axios from "axios";
import styles from "./Login.css";
import Problem from "./ProblemOccured";

class Login extends Component {
  constructor() {
    super();
    this.state = {
      userName: "",
      email: "",
      signUp: false,
      login: false,
      problem: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);

  }


  handleSubmit(events) {
    events.preventDefault();

    axios
      .post(window.location.href + "api/users/login", {
        email: events.target.email.value,
        password: events.target.password.value
      })
      .then(res => {
        this.setState({ login: true });
      })
      .catch(err => {
        this.setState({ problem: true });
        console.log(err);
      });
  }
  handleSignUp(events) {
    events.preventDefault();
    this.setState({ signUp: true });
  }
  render() {
    let error;
    if (this.state.signUp) {
      console.log("Attempting To Change Page To SignUp");
      return <Redirect push to="/SignUp" />;
    }
    if (this.state.login) {
      console.log("Attempting To Change Page To Home");
      return <Redirect push to="/Home"/>;
    }
    if (this.state.problem) {
      error = <Problem />;
    }
    return (
        <center>
          <h1 id="header">It's Purrrrrrrrrrfect</h1>
          {error}
          <form className="form" onSubmit={this.handleSubmit}>
            <label>
              <input type="text" name="email" placeholder="Email" />
              <br />
              <input type="password" name="password" placeholder="Password" />
            </label>
            <br />
            <input type="submit" />
          </form>
          <button onClick={this.handleSignUp}>SignUp</button>
        </center>);
  }
}

export default Login;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router}；
从“react router dom”导入{Link，Switch，Route}；
从“/MyComponents/HomePage”导入主页；
从“/HeaderComponent/NavBar”导入导航栏；
从“/MyComponents/LoginRouting”导入登录路由；
从“/MyComponents/SignUp”导入注册；
类应用程序扩展了React.Component{
render（）{
返回
;
}
}
导出默认应用程序；

我的App.jsx

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}

export default App;

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}
export default App;

import React, { Component } from "react";
import Home from "./HomePage";
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import Login from "./Login"
import SignUp from "./SignUp";


const LoginRouting = ({}) => (
  <Login>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route exact path="/Home" component={Home} />
      <Route exact path="/SignUp" component={SignUp} />
    </Switch>
  </Login>
);

export default LoginRouting;

import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import fetch from "isomorphic-fetch";
import axios from "axios";
import styles from "./Login.css";
import Problem from "./ProblemOccured";

class Login extends Component {
  constructor() {
    super();
    this.state = {
      userName: "",
      email: "",
      signUp: false,
      login: false,
      problem: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);

  }


  handleSubmit(events) {
    events.preventDefault();

    axios
      .post(window.location.href + "api/users/login", {
        email: events.target.email.value,
        password: events.target.password.value
      })
      .then(res => {
        this.setState({ login: true });
      })
      .catch(err => {
        this.setState({ problem: true });
        console.log(err);
      });
  }
  handleSignUp(events) {
    events.preventDefault();
    this.setState({ signUp: true });
  }
  render() {
    let error;
    if (this.state.signUp) {
      console.log("Attempting To Change Page To SignUp");
      return <Redirect push to="/SignUp" />;
    }
    if (this.state.login) {
      console.log("Attempting To Change Page To Home");
      return <Redirect push to="/Home"/>;
    }
    if (this.state.problem) {
      error = <Problem />;
    }
    return (
        <center>
          <h1 id="header">It's Purrrrrrrrrrfect</h1>
          {error}
          <form className="form" onSubmit={this.handleSubmit}>
            <label>
              <input type="text" name="email" placeholder="Email" />
              <br />
              <input type="password" name="password" placeholder="Password" />
            </label>
            <br />
            <input type="submit" />
          </form>
          <button onClick={this.handleSignUp}>SignUp</button>
        </center>);
  }
}

export default Login;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router}；
从“react router dom”导入{Link，Switch，Route}；
从“/MyComponents/HomePage”导入主页；
从“/HeaderComponent/NavBar”导入导航栏；
从“/MyComponents/LoginRouting”导入登录路由；
从“/MyComponents/SignUp”导入注册；
类应用程序扩展了React.Component{
render（）{
返回
;
}
}
导出默认应用程序；

LoginRoute.jsx

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}

export default App;

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}
export default App;

import React, { Component } from "react";
import Home from "./HomePage";
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import Login from "./Login"
import SignUp from "./SignUp";


const LoginRouting = ({}) => (
  <Login>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route exact path="/Home" component={Home} />
      <Route exact path="/SignUp" component={SignUp} />
    </Switch>
  </Login>
);

export default LoginRouting;

import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import fetch from "isomorphic-fetch";
import axios from "axios";
import styles from "./Login.css";
import Problem from "./ProblemOccured";

class Login extends Component {
  constructor() {
    super();
    this.state = {
      userName: "",
      email: "",
      signUp: false,
      login: false,
      problem: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);

  }


  handleSubmit(events) {
    events.preventDefault();

    axios
      .post(window.location.href + "api/users/login", {
        email: events.target.email.value,
        password: events.target.password.value
      })
      .then(res => {
        this.setState({ login: true });
      })
      .catch(err => {
        this.setState({ problem: true });
        console.log(err);
      });
  }
  handleSignUp(events) {
    events.preventDefault();
    this.setState({ signUp: true });
  }
  render() {
    let error;
    if (this.state.signUp) {
      console.log("Attempting To Change Page To SignUp");
      return <Redirect push to="/SignUp" />;
    }
    if (this.state.login) {
      console.log("Attempting To Change Page To Home");
      return <Redirect push to="/Home"/>;
    }
    if (this.state.problem) {
      error = <Problem />;
    }
    return (
        <center>
          <h1 id="header">It's Purrrrrrrrrrfect</h1>
          {error}
          <form className="form" onSubmit={this.handleSubmit}>
            <label>
              <input type="text" name="email" placeholder="Email" />
              <br />
              <input type="password" name="password" placeholder="Password" />
            </label>
            <br />
            <input type="submit" />
          </form>
          <button onClick={this.handleSignUp}>SignUp</button>
        </center>);
  }
}

export default Login;

import React，{Component}来自“React”；
从“/主页”导入主页；
从“react router dom”导入{Link，Switch，Route}；
从“反应路由器”导入{Redirect}；
从“/Login”导入登录名
从“/SignUp”导入注册；
常量登录路由=（{}）=>(
);
导出默认登录路由；

Login.jsx

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}

export default App;

import React, {Component} from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import Home from "./MyComponents/HomePage";
import NavBar from "./HeaderComponent/NavBar";
import LoginRoute from "./MyComponents/LoginRouting";
import SignUp from "./MyComponents/SignUp";


class App extends React.Component {


  render() {
    return <Switch>
        <Route exact path="/" component={LoginRoute} />
      </Switch>;
  }
}
export default App;

import React, { Component } from "react";
import Home from "./HomePage";
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import Login from "./Login"
import SignUp from "./SignUp";


const LoginRouting = ({}) => (
  <Login>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route exact path="/Home" component={Home} />
      <Route exact path="/SignUp" component={SignUp} />
    </Switch>
  </Login>
);

export default LoginRouting;

import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import { Link, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import fetch from "isomorphic-fetch";
import axios from "axios";
import styles from "./Login.css";
import Problem from "./ProblemOccured";

class Login extends Component {
  constructor() {
    super();
    this.state = {
      userName: "",
      email: "",
      signUp: false,
      login: false,
      problem: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);

  }


  handleSubmit(events) {
    events.preventDefault();

    axios
      .post(window.location.href + "api/users/login", {
        email: events.target.email.value,
        password: events.target.password.value
      })
      .then(res => {
        this.setState({ login: true });
      })
      .catch(err => {
        this.setState({ problem: true });
        console.log(err);
      });
  }
  handleSignUp(events) {
    events.preventDefault();
    this.setState({ signUp: true });
  }
  render() {
    let error;
    if (this.state.signUp) {
      console.log("Attempting To Change Page To SignUp");
      return <Redirect push to="/SignUp" />;
    }
    if (this.state.login) {
      console.log("Attempting To Change Page To Home");
      return <Redirect push to="/Home"/>;
    }
    if (this.state.problem) {
      error = <Problem />;
    }
    return (
        <center>
          <h1 id="header">It's Purrrrrrrrrrfect</h1>
          {error}
          <form className="form" onSubmit={this.handleSubmit}>
            <label>
              <input type="text" name="email" placeholder="Email" />
              <br />
              <input type="password" name="password" placeholder="Password" />
            </label>
            <br />
            <input type="submit" />
          </form>
          <button onClick={this.handleSignUp}>SignUp</button>
        </center>);
  }
}

export default Login;

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router}；
从“react router dom”导入{Link，Switch，Route}；
从“反应路由器”导入{Redirect}；
从“同构提取”导入提取；
从“axios”导入axios；
从“/Login.css”导入样式；
从“/ProblemOccursed”导入问题；
类登录扩展组件{
构造函数（）{
超级（）；
此.state={
用户名：“”，
电邮：“，
报名：错，
登录：false，
问题：错误
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleSignUp=this.handleSignUp.bind（this）；
}
handleSubmit（事件）{
events.preventDefault（）；
axios
.post（window.location.href+“api/users/login”{
电子邮件：events.target.email.value，
密码：events.target.password.value
})
。然后（res=>{
this.setState（{login:true}）；
})
.catch（错误=>{
this.setState（{problem:true}）；
控制台日志（err）；
});
}
handleSignUp（事件）{
events.preventDefault（）；
this.setState（{signUp:true}）；
}
render（）{
让错误；
if（this.state.signUp）{
日志（“试图将页面更改为注册”）；
返回；
}
if（this.state.login）{
日志（“试图将页面更改为主页”）；
返回；
}
如果（本状态问题）{
误差=；
}
返回(
它是Purrrrrfect
{错误}




报名
);
}
}
导出默认登录；

React中没有“真正”的嵌套路由，因为您所做的只是在同一个html文件（VirtualDOM->DOM）中呈现每个组件

唯一的“真实”嵌套路由应该在后端。在您的示例中，您似乎使用axios来获取/发布数据到后端

您想要做的并不是真正必要的，也可以使用components/const来完成。但是，如果您想将组件嵌套在根组件中，则需要如下更改代码：

<Route exact path="/" component={LoginRoute} >



</Route>

然后，在根路由中添加所有要“嵌套”的路由，如下所示：

 <Route exact path="/" component={LoginRoute} >

<Route exact path="/Home" component={Home} />
      <Route exact path="/SignUp" component={SignUp} />

    </Route>

这将完成此任务。使用Home进行活动链接

---

您好！

您能更具体地说明出了什么问题吗？当我将浏览器指向页面时，控制台显示此错误____