问题

Question

在这种情况下，有一个App组件，其中有一个Header组件，如果用户登录，则呈现一个标头，否则显示一个标头。还有一个Access组件，如果用户未登录，则呈现Landing组件，如果用户登录，则呈现Dashboard。如果登录，则用户可以访问所有路由。如果用户在react-router-dom组件上，如何使用Dashboard渲染组件？当前，LeftNav应该始终处于可见状态，而main-content className中的组件则根据路线进行切换。如果导航到LeftNav或MainContent LeftNav "/" TestComponent /test标头，则目前只有/test/new neither the 和or组件可在render, however the上工作component is still rendering correctly. What am I doing wrong here or how is this toggling between主要内容的组件实现了吗？

import { BrowserRouter, Route } from "react-router-dom";
import Header from "./Header";
import Access from "./Access";

class App extends Component {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <div>
                        <Header />
                        <Route exact path="/" component={Access} />
                    </div>
                </BrowserRouter>
            </div>
        );
    }
};

export default App;

////////////////////////////////

import Landing from "./Landing";
import Dashboard from "./Dashboard";

class Access extends Component {
    renderContent() {
        switch (this.props.auth) {
            case null:
                return;
            case false:
                return (
                    <Landing />
                );
            default:
                return (
                    <Dashboard />
                );
        }
    }

    render() {
        return (
            <div>
                {this.renderContent()}
            </div>
        );
    }
}

export default Access;

////////////////////////////////

import { Switch, Route } from "react-router-dom";
import LeftNav from "./dashboard/LeftNav";
import MainContent from "./dashboard/MainContent";
import TestContent from "./dashboard/TestContent";
import TestContentNew from "./dashboard/TestContentNew";

class Dashboard extends Component {
    render() {
        return (
            <div>
                <div className="dashboard-wrapper" style={dashboardWrapper}>
                    <LeftNav />
                    <div className="main-content">
                        <Switch>
                            <Route path="/" component={MainContent} />
                            <Route path="/test" component={TestContent} />
                            <Route path="/test/new" component={TestContentNew} />
                        </Switch>
                    </div>
                </div>
            </div>
        );
    }
};

export default Dashboard;

Answer 1

问题

应用程序中的主Route 仅匹配并在完全匹配“ /”时呈现路线，因此当您导航到另一条路径时，它不再匹配。

解决方案

我看不到您将auth作为Access的道具传递给 where ，但是由于它可以处理 和 < / em>呈现您的实际路线，您只需渲染 it 即可，而不是Route中的App。它将始终由路由器呈现并显示登录页面或仪表板。

import { BrowserRouter, Route } from "react-router-dom"; import Header from "./Header"; import Access from "./Access"; class App extends Component { render() { return ( <div> <BrowserRouter> <div> <Header /> <Access /> </div> </BrowserRouter> </div> ); } };

使用嵌套组件内的react-router-dom在主要内容组件之间导航

1 个答案:

问题

解决方案