渲染没有父路由器视图的嵌套路由器视图 - React.js

Question

大家好 :) 我在这里的第一个问题。 （有几个类似的问题，但他们没有回答我的特定代码问题，我尝试应用它们但没有成功。）

所以我想在嵌套路由中渲染子组件，而不在视图中显示父组件 见最后图--->

import React from 'react';
import {BrowserRouter, Route, Switch, Link} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';

import Routing from "./components/Routings";



export default class Browserrouting extends React.Component {
  render () {
    return (
      <BrowserRouter>
        <Routing/>
      </BrowserRouter>
    )
  }
}

这里是路由组件：

import About from "../views/About";
import HomeBackground from "../views/Background";
import ShelterApp from '../views/ShelterApp';


export default (props) => (
    <div className="flexColumn">
        <div> <ul className="flexRow center">
            <li className="homeLink"><Link className="colorBrown" to="/">Home</Link></li>
            <li className="homeLink"><Link className="colorBrown" to="/shelterApp">Shelter App</Link></li>

            <li className="homeLink"><Link className="colorBrown" to="/about">About our site and shelter</Link></li>
        </ul></div>

        <Switch>
            <Route exact path="/" component={() => <HomeBackground />} />
            <Route path="/about" component={() => <About />} />
            <Route path="/shelterApp" component={() => <ShelterApp />} />
        </Switch>
    </div>

)

在 ShelterApp 组件中，我有一些文本并导入了另一个组件，其中包含我想显示的链接和嵌套路由，但不显示父组件 ShelterApp：

class ShelterApp extends React.Component {
    render() {
        return (   
             <div className="flex center">
               
        <div className="card center" style={{ "width": "25em", "height":"25em" }}>
            <div className="card-body textCenter">
                <h5 className="card-title paddingTitle">Welcome to our site</h5>
                <h6 className="card-subtitle mb-2 text-muted"> Login or register if it's your first time</h6>
        
            </div>
            <LoginRouting match={this.props.match} />
        </div>
        
        </div>)
    }

}

export default ShelterApp;

以及层次结构中具有“最低”路由的最后一个子组件：

class LoginRouting extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            users: []
        }
    }
    static propTypes = {
        match: PropTypes.object.isRequired,
        location: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired
    };

    render() {
        const { match, location, history } = this.props;

        return (
            <div >
                <div className="flexRow center">
                    <Button className={" loginRouting"} type={"button"} bootstrapClass={"btn btn-light"} child={<Link to="/shelterApp/login">Login form</Link>} />
                    <Button className={" loginRouting"} type={"button"} bootstrapClass={"btn btn-light"} child={<Link to="/shelterApp/register">Register form</Link>} />
                </div>
                <div>

                    <Route path="/shelterApp/login" render={() => <Login />} />

                    <Route path="/shelterApp/register" render={() => <Register />} />

                </div>
            </div>
        )
    }

}

export default withRouter( LoginRouting)

enter image description here

带有视图的图像： 我会感谢任何建议！

Answer 1

在您的ShelterApp 组件上，您可以创建一个名为hideInfo 的新状态或其他东西，用于跟踪用户是否点击了“登录表单”或“注册表单”。

然后您可以将道具传递给您的<LoginRouting> 组件。 当用户点击“登录表单”或“注册表单”时，您将更改this.hideInfo。

<LoginRouting onShowForm={() => this.setState({ hideInfo: !hideInfo})} match={this.props.match} />