Javascript 带有React路由器的ReactJS单页应用程序SPA，带有单独的登录页

我是一个新的反应和反应路由器。我一直在尝试创建一个单页应用程序，它有一个带有导航栏和内容的布局，以及一个不加载在此布局中的登录页面。我一直在搜索网络和stackoverflow，但还没有找到答案。为了创建我的应用程序，我使用“纱线创建react应用程序appName”并使用“纱线添加”添加react路由器。我需要如何创建我的路由，以便我有一个具有自己布局的登录页面和一个可以显示我的内容的主布局

这是我的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render(
然而，我不太明白。我不确定到底需要添加什么才能使这项工作顺利进行

下面的图片说明了我正在尝试做的事情：

Main.js：

Login.js：

当前问题是登录正在主布局中加载，而不是在其自己的页面中加载：
您看过了吗？它准确地解释了您的问题。示例中的
PrivateRoute
可以用于呈现所有应该是私有的路由。@MarkoGrešak我刚刚查看了该示例，并尝试格式化示例中显示的代码。不过，我仍然遇到问题。在这里，登录组件显示在内部我的布局不是我要找的。我相信这是因为我的标签的位置，但我不知道要更改什么。我加载一个，然后我有我的标签，因为这是我的内容需要显示的地方。当我有一个标签时，登录组件会加载我的内容所在的位置，而不是在单独的页面上。你有没有想过我有same问题
import React, { Component } from 'react';
import Main from "./Main";
import Login, {fakeAuth} from "./components/Login";
import {
    Route,
    NavLink,
    HashRouter,
    Redirect,
    withRouter,
    Switch,
    BrowserRouter
} from "react-router-dom";


class App extends Component {
  render() {
    return (
        <BrowserRouter>  
        <Switch>
          <Route exact path="/" component={Main} />  
          <Route path="/login" component={Login} /> 
        </Switch>
        </BrowserRouter>

    );
  }
}

export default App;

import React from 'react';
import {
    Route,
    NavLink,
    HashRouter,
    Redirect
} from "react-router-dom";

class Login extends React.Component {

    constructor() {

      super();

      this.state = {
        redirectToReferrer: false
      }
      this.login = this.login.bind(this);
    }

    login() {

      fakeAuth.authenticate(() => {
        this.setState({ redirectToReferrer: true })
      })
    }

    render() {
      const { from } = this.props.location.state || { from: { 
pathname: '/' } }
      const { redirectToReferrer } = this.state;

      if (redirectToReferrer) {
        return (
          <Redirect to={from} />
        )
      }

      return (
        <div>
          <p>You must log in to view the page at {from.pathname}</p>
          <button onClick={this.login}>Log in</button>
        </div>
      )
    }


  }

  /* A fake authentication function */

  export const fakeAuth = {
    isAuthenticated: false,
    authenticate(cb) {
      this.isAuthenticated = true;
      setTimeout(cb, 100);
    }
  };


  export default Login

import React, { Component } from 'react';
import Navigation from './components/Navigation'  
import LeftSidebar from './components/LeftSidebar';
import RightSidebar from './components/RightSidebar';
import Login, {fakeAuth} from "./components/Login";
import {
    Route,
    NavLink,
    HashRouter, 
    Redirect,
    withRouter,
    Switch
} from "react-router-dom";


/* Home component */
const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

/* Category component */
const Category = () => (
  <div>
    <h2>Category</h2>
  </div>
)

/* Products component */
const Products = () => (
  <div>
    <h2>Products</h2>
  </div>
)

class Main extends Component {
  render() {
    return (
        <HashRouter>
        <div className="container container-fluid">
            <Navigation/>
            <div className="row">
                <div className="col-md-3">
                    <LeftSidebar/>
                </div>

                <div className="col-md-6">
                  <Route exact path="/" component={Home} />
                  <Route path="/category" component={Category}/>
                  <PrivateRoute authed={fakeAuth.isAuthenticated} path='/products' component = {Products} />
                </div>

                <div className="col-md-3">
                    <RightSidebar/>
                </div>
            </div>
        </div>
        </HashRouter>
    );
  }
}

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated === true ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } 
}}
          />
        )}
    />
  );
};

const AuthButton = withRouter(
  ({ history }) =>
    fakeAuth.isAuthenticated ? (
      <p>
        Welcome!{" "}
        <button
          onClick={() => {
            fakeAuth.signout(() => history.push("/"));
          }}
        >
          Sign out
        </button>
      </p>
    ) : (
      <p>You are not logged in.</p>
    )
);

export default Main;

....
<ul>
    <li><Link to="/">Homes</Link></li>
    <li><Link to="/category">Category</Link></li>
    <li><Link to="/products">Products</Link></li>
</ul>
....