admin-on-rest：实现一个登录页面，其中包含指向注册页面的链接

Question

我正在尝试使用指向注册表单的链接在admin中实现登录页面。我是反应和前端发展的新手。

我从管理员休息演示中复制了登录页面，但我无法弄清楚如何在底部添加链接。我尝试从react-router添加一个组件，但我不断收到各种错误。有没有我可以效仿的例子？

编辑：我正在尝试使用自定义路线添加注册页面，但页面显示在管理界面UI中。这就是它的样子：

Answer 1

admin-on-rest是一个前端框架，但它也是一组可以在您自己的应用中使用/集成的组件。

了解反应如何与管理员休息一起工作非常重要。 Afaik你必须知道redux，redux-form，react-router和redux-saga。

有一个简短的描述如何add a login page和 how to customize the login page

但这不是一个例子。

Here是登录页面的源代码。如果您确实要复制页面，可以在render方法中添加指向注册页面的链接。

首先创建一个名为

的文件

  

login.js

并复制原始登录页面。导入链接组件：

import { Link } from 'react-router-dom';

然后在某处使用链接，例如在</form>和</Card>之间（第106行和第107行之间）。

<Link to={{pathname: "/register"}} >Registration</Link>

在你的

中

  

app.js

导入您创建的登录页面：

import Login from './login';

并使用它：

<Admin loginPage={Login} authClient={authClient} restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>

编辑：

现在，您在“登录”页面中有一个“注册”链接。

现在，是时候创建注册页面了。我不是管理员休息专家，但我认为管理休息的想法是始终显示菜单并检查授权。我认为大多数管理员应用程序都没有注册页面，对于尚未登录的用户必须是可见的，并且他们不应该看到左侧的菜单。它类似于登录页面。因此，您必须使用自定义布局创建自定义页面的自定义路径（无需授权检查）。

创建一个名为

的新文件

  

MyLayout.js

内容为

Layout.js

并删除行

injectTapEventPlugin()

和

<Sidebar>
  {menu}
</Sidebar>

隐藏左侧的菜单。

然后创建一个名为

的文件

  

customRoutes.js

具有以下内容：

import React from 'react';
import { Route } from 'react-router-dom';
import Register from './Register';

export default [
    <Route exact path="/register" component={Register} />
];

和一个名为

的文件

  

Register.js

与

import React from 'react';
import { Card, CardText } from 'material-ui/Card';
import { ViewTitle } from 'admin-on-rest';

const Register = () => (
    <Card>
        <ViewTitle title="Register" />
        <CardText>             
            <div>This is the register page.</div>
        </CardText>
    </Card>
);

export default Register;

在你的

中

  

app.js：

import MyLayout from './MyLayout';
import customRoutes from './customRoutes';
import MyLayout from './MyLayout';
import authClient from './authClient';


<Admin appLayout={MyLayout} loginPage={Login} authClient={authClient} customRoutes={customRoutes} restClient={myApiRestClient}>

这只是一个（丑陋的）例子。

希望这会有所帮助。 ：）