Question

我在使用React创建自定义Route组件之后。我遇到了我发现的以下解决方案，但之后我收到了错误。

thesis: $(THESIS_MAIN_FILE)

    # Start counting the compilation time and import its shell functions
    . ./setup/scripts/timer_calculator.sh

    # Creates the shell variable `current_dir` within the current folder path
    $(eval current_dir := $(shell pwd)) echo $(current_dir) > /dev/null

    # What is the difference between “-interaction=nonstopmode” and “-halt-on-error”?
    # https://tex.stackexchange.com/questions/258814/what-is-the-difference-between-interaction-nonstopmode-and-halt-on-error
    #
    # What reasons (if any) are there for compiling in interactive mode?
    # https://tex.stackexchange.com/questions/25267/what-reasons-if-any-are-there-for-compiling-in-interactive-mode
    latexmk \
    -pdf \
    -silent \
    -jobname="$(THESIS_OUTPUT_NAME)" \
    -output-directory="$(CACHE_FOLDER)" \
    -aux-directory="$(CACHE_FOLDER)" \
    -pdflatex="$(PDF_LATEX_COMMAND) --interaction=batchmode" \
    -use-make $(THESIS_MAIN_FILE)

    # Copy the generated PDF file from the cache folder
    cp $(CACHE_FOLDER)/$(THESIS_OUTPUT_NAME).pdf $(current_dir)/$(THESIS_OUTPUT_NAME).pdf

    # Calculate the elapsed seconds and print them to the screen
    showTheElapsedSeconds "$(current_dir)"

错误：JSX元素类型＆＃39; this.props.component＆＃39;没有任何构造或呼叫签名。

以下是我将使用该组件的方式：

import * as React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLoggedIn } from '../../modules/AuthService';

export class AuthRequiredRoute extends Route {
render() {
    if (!isLoggedIn()) {
        return <Redirect to='/login' />
    } else {
        return <this.props.component />
    }
  }
}

有人可以帮我解决这个问题吗？

Answer 1

我设法通过使用不同的解决方案来解决问题。

我使用以下代码创建了一个名为Authenticated.tsx的HOC模块：

import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { isLoggedIn } from '../../modules/AuthService';

export function Authenticated(BaseComponent) {
class AuthenticatedComponent extends React.Component<RouteComponentProps<any>, {}> {
    componentWillMount() {
        this.checkAuthentication(this.props);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.location !== this.props.location) {
            this.checkAuthentication(nextProps);
        }
    }

    checkAuthentication(params) {
        const { history } = params;
        if (!isLoggedIn()) {
            history.replace({ pathname: '/login' });
        }
    }

    render() {
        return <BaseComponent {...this.props} />;
    }
}

return withRouter(AuthenticatedComponent);
}

然后我在我的routes.tsx组件中使用了这种方式：

import { Authenticated } from './components/utils/Authenticated';

export const routes = <Layout>
<Route exact path='/' component={Authenticated(Home)} />
<Route path='/login' component={Login} />
</Layout>;

Answer 2

使用Component变量构造jsx组件：

export class AuthRequiredRoute extends Route {
    render() {
        if (!isLoggedIn()) {
            return <Redirect to='/login' />
        } else {
            let Component = this.props.component;
            return <Component />
        }
    }
}

Answer 3

为什么不使用多态能力？对我来说很完美：

 export class ProtectedRoute extends Route {
   render() {
     if (!isLoggedIn()) {
         return <Redirect to='/login' />
     } else {
       return super.render();
     }
   }
 }

在OO概念中（尽管我们是JS世界...），Route的渲染是一个黑匣子，我认为我们将无法完全对基础渲染进行编码。我们想要的只是为特定的行为（未登录）向Route元素添加行为，因此我们要添加的只是我们要扩展的内容，而不是基本行为。此外，即使出于某些原因（可能说得不太聪明），我也会精确复制Route的基本渲染的内容。如果有一天将更新路线，我将失去所有这些新增功能。

使用React Router 4的自定义路由

3 个答案: