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

IMAGE视图：我将感谢您的任何建议！

Answer 1

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

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

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

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

1 个答案: