Question

我正在尝试通过使用一个带有参数的链接来分隔多个链接。

例如：

代替。

用户/登录
用户/个人资料
用户/家庭

我正在尝试使用。

User /：id

当有人单击“用户/登录”链接时，将选择登录组件。

如果有人单击“用户/个人资料”链接，则将选择“个人资料”组件。

我可以使用它，但是反应路由器似乎为每次点击触发两次。

路由器

chartjs-node

选择用户组件功能

const AppRouter = (props) => (

    <BrowserRouter >
        <div className={`site-grid-container ${props.siteBgBodyColor}`}>
            <div className='site-grid-nav-body'>
                <NavigationBar />
                <Switch>
                    <Route path="/" component={Home} exact={true} />
                    <Route path="/about" component={About} />
                    <Route path="/contact" component={Contact} />

                    <Route path="/user/:id" component={User} />

                    <Route component={PageNotFound} />
                </Switch>
            </div>
        </div>
    </BrowserRouter>
);

export default AppRouter;

获取所选视图

const UserViews= ({ match }) => {
    console.log('-------  called twice -----')
    const id = match.params.id;
    const SelectedView = getSelectedView(id);

    return (
            <SelectedView />
    );
}

export default UserViews;

上面的代码可以正常工作，但是react路由器似乎为每次点击触发两次。有正确的方法去做我想做的事吗？

谢谢

在参数更改时反应路由器动态组件？

0 个答案: