Question

我是React和React Router的新手。我一直在尝试创建一个单页面应用程序，它具有导航栏和内容的布局以及不在此布局中加载的登录页面。我一直在搜索网络和stackoverflow，但一直无法解决这个问题。为了创建我的应用程序，我使用＆＃34; yarn创建react-app appName＆＃34;并使用＆＃34;纱线添加＆＃34;添加反应路由器。我如何创建我的路线，以便我有一个具有自己的布局的登录页面和一个可以显示我的内容的主要布局。

这是我的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();

这是我的App.js：

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;

这是我的Login.js：

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

这是我的Main.js：

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>
....

当我单击Home，Category或Products链接时，我希望组件加载到Main.js中的SPA布局中，我希望Login.js加载到自己的页面中。现在，Home，Category，Products和Login正在主布局中加载。我需要更改这些路由或我的代码的其他部分才能使其正常工作？

编辑：

在Main.js类中添加了我的身份验证代码。添加了Login.js类。

除了关于此的一些教程之外，我一直在遵循这个答案的建议： Login Page Separated From Single-page Application (SPA) in ReactJS 但是，我不太了解它。我不确定我需要添加什么来使这项工作。

以下是说明我要做的事情的图片：

Main.js： main SPA layout

Login.js： Login page

当前的问题是登录是在主布局而不是自己的页面加载： Do NOT want this

ReactJS与React Router单页面应用程序SPA，具有单独的登录页面

0 个答案: