Question

因此，我是ReactJS的新手，正在尝试弄清楚如何使应用程序的登录页面具有不同的标题，然后在用户登录后具有另一个标题。

我只希望在第一页上将LoginHeader和PostHeader作为主要标头，一旦它们通过身份验证。

但是，当我进入登录页面时，每当我单击登录按钮时，即使路由正确的链接，我也会自动进入PostHeader页面。 PostHeader中的所有内容都可以正常运行，例如当我单击Home和Create时，它们会返回假定的页面。

我的代码在下面

index.js

import React from 'react';
import createHistory from 'history/createBrowserHistory';
import ReactDOM from 'react-dom';
import { Route, Switch, Router } from 'react-router-dom';
import Header from "./_components/header/header";

ReactDOM.render(
  <Router history={createHistory()}>
    <div>
        <Header />
    </div>
  </Router>,
  document.getElementById('root'),
);

Header.js

import React, {Component} from 'react';
import {Link,Route,withRouter, Switch, } from 'react-router-dom';
import PostHeader from './PostHeader';
import LoginHeader from './LoginHeader';

class Header extends Component{
    render(){
        if (window.location.pathname === '/') {
            return(
                <LoginHeader />
            );
        };
        return(
            <PostHeader />
        );
    }
}

export default Header;

LoginHeader.js

import React, {Component} from 'react';
import {Link,Route,withRouter, Switch} from 'react-router-dom';

import SignIn from '../signin/signin';
import TopProjects from '../create_projects/top_projects';

class LoginHeader extends Component{
    render(){
        return(
            <div className="container">
                <div>
                    <h3>The Web App</h3>
                        <nav>
                            <ul>
                                <li><Link to="/sign-in">Sign In?</Link></li>
                                <li><Link to="/top-projects">Top Projects</Link></li>
                            </ul>
                        </nav>
                    <hr />
                </div>
                <Switch>
                    <Route exact path="/sign-in" component={SignIn}/>
                    <Route path="/top-projects" component={TopProjects} />
                </Switch>
            </div>
        );
    }
}

export default LoginHeader;

PostHeader.js

import React, {Component} from 'react';
import {Link,Route} from 'react-router-dom';

import Home from '../home/home';
import CreateProjects from '../create_projects/create_projects';

class PostHeader extends Component{
    render(){
        return(
            <div className="container">
                <div>
                    <h3>The Web App</h3>
                        <nav>
                            <ul>
                                <li><Link to="/home">Home</Link></li>
                                <li><Link to="/create-projects">Create</Link></li>
                            </ul>
                        </nav>
                    <hr />
                </div>
                <Route path="/home" component={Home}/>
                <Route path="/create-projects" component={CreateProjects} />
            </div>
        );
    }
}

export default PostHeader;

我只想为某些页面使用不同的标题。

Answer 1

那是因为在Header.js中，只有在根路由中才渲染LoginHeader。

if (window.location.pathname === '/') {
    return(
        <LoginHeader />
    );
};

因此，当您单击登录按钮时，它会将您重定向到/sign-in，因此，当重新渲染Header时，条件将落在else语句上，该语句返回{ {1}}。

ReactJS App无法返回正确的页面

1 个答案: