Question

我在所有组件中使用react-hook。现在，当我要渲染它时，它位于React_Router BrowserRouter组件内部。给我一个错误。

错误消息：无效的挂接调用。挂钩只能在功能组件的主体内部调用

Answer 1

如果我很了解您的问题，我认为您可以像hoo这样做嵌套路由。

例如，这是您的主要路由器：

import React from 'react';
import {Switch, Route, withRouter, Link} from "react-router-dom";
import MyComponent from "./MyComponent";


class Main extends React.Component
{
    render() {
        return (
            <div className='main'>
                <Switch>
                    <Route exact path='/test' component={MyComponent} />
                </Switch>
            </div>
        );
    }
}

export default withRouter(Main);

这将是带有嵌套路由的路由组件。

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

class MyComponent extends React.Component
{
    render()
    {
        const {path} = this.props.match;
        return (
            <div className='test'>
                <Switch>
                    <Route path={`${path}/catalog`}>
                        <div>Route catalog</div>
                    </Route>
                    <Route exact path={path}>
                        <div>Route dashboard</div>
                    </Route>
                </Switch>
            </div>
        );
    }
}

export default withRouter(MyComponent);

是使用React-hook的函数组件可以从类组件内部渲染吗

1 个答案: