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>

这将完成工作。使用主页获取活动链接。

问候！

嵌套路由不适用于React

1 个答案: