reactjs - 反应路由，反应路由dom

Question

当单击 react-router-dom 中的链接组件时，我正在编写动态加载组件的代码。

加载链接的数据。

const AsideMenu = [
    {"Title1": [
        {"component": "Comp1", "MenuName": "Comp 1", "id": 1},
        {"component": "Comp2", "MenuName": "Comp 2", "id": 2},
        {"component": "Comp3", "MenuName": "Comp 3", "id": 3},
    ]},
    {"title2": [
        {"component": "Comp 4", "MenuName": "Comp 4", "id": 13},
        {"component": "Comp 5", "MenuName": "Comp 5", "id": 14},
        {"component": "Comp 6", "MenuName": "Comp 6", "id": 15},
    ]}
]

export default AsideMenu;

AsideContainer.js

const AsideContainer = ({clickMenuIcon, isExpanded}) => {

    const getDropdown = (menu, header, index) => {
        return (
            <div className="nav-menu" key={`${header}_${index}`}>
                <span>{header}</span>
                <Dropdown menu={menu} title={header}/>
            </div>
        )
    }

    return(
        <div className={`sidenav ${isExpanded ? 'expanded' : ''}`} onClick={clickMenuIcon}>
            {AsideMenu.map((item, index) => getDropdown(Object.values(item)[0], Object.keys(item)[0], index))}
        </div>
    )
}

export default AsideContainer;

Dropdown.js 文件

import { 
    Link,
    BrowserRouter as Router
} from "react-router-dom";
import "./__dropdown.scss";

const Dropdown = ({menu, title}) => {
    
    return(
        <div className="menu">
            <Router>
                {menu.map((item, index) => <Link to={`/${title && typeof(title) === "string" && title.split(" ").join("")}/${item['component']}/${item['id']}`} 
                    className="menu-item" key={`${item.MenuName}_${index}`}>
                        {item.MenuName}
                    </Link>
                )}
            </Router>
        </div>
    );
}

export default Dropdown;

我写的Routes.js文件如下：

const Routes = () => {
    return (
        <Router>
            <Switch>
                <Route exact={true} path="/:title/:component/:id" render={
                    (props) => {
                        console.log(props);
                        return <WrappedComponent {...props} />
                    }
                }>
                </Route>
                <Route exact={true} path="/" component={Home} />
            </Switch>
        </Router>
    );
}

export default Routes;

WrappedComponent 如下：

const WrappedComponent = ({history, location, match}) => {
    const {component} = match.params;
    const LoadableComponent = LazyComponents[component];
    return (
        <ErrorBoundary>
            <Suspense fallback={renderLoading()}>
                <LoadableComponent />
            </Suspense>
        </ErrorBoundary>
    )
}

export default WrappedComponent;

现在，由于我继续仅加载 WrappedComponent，因此尽管 url 正在更新，但在单击另一个链接时，我没有在 match 属性下获取更新的参数。如果我会做 window.location.href，那么我会得到更新的链接。请建议

标签： reactjsreact-router-dom