嵌套路由不适用于 React

Question

我正在尝试在我的节点应用程序中使用嵌套路由。最初我的 App.jsx 中有所有路由并且它运行良好。我决定使用嵌套路由以更好地处理从子节点到父节点的数据。

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

我已经尝试过 HashRouter 而不是 BrowserRouter，因为我的应用程序（目前）仅呈现静态页面，但它没有帮助。

我还使用了下面链接中引用的更新阻止程序，但是可惜它也不起作用

请帮助这个新手！

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

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;

我的 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;

LoginRoute.jsx

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;

Login.jsx

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;

Answer 1

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>

这将完成这项工作。将主页用于活动链接。

您好！