如何在路由内使用带有参数的反应路由器，例如“sitename.com/parameter/dashboard”答案

【问题标题】：how to use react router with parameter inside route like 'sitename.com/parameter/dashboard'如何在路由内使用带有参数的反应路由器，例如“sitename.com/parameter/dashboard”
【发布时间】：2020-12-12 05:29:47
【问题描述】：

我正在开发基于 React 的在线购物商店。假设我有 baseurl 和 onlineshopping.com 一样，并且我正在动态定义供应商。

每个供应商都有自己的代码

当我想打开网站时，我想传递一个供应商代码作为参数，然后，我想路由到特定路径。

通常我使用这样的路径来路由到仪表板组件，该组件导航到onlineshopping.com/dashboard：

<Route exact path="/dashboard" component={Dashboard} />

我想使用onlineshopping.com 和/dashboard 之间的参数导航到onlineshopping.com/vendorCode/dashboard

我试过了，但是不行

<Route exact path="/:vendorCode/dashboard" component={Dashboard} />

这是我的路线：

<BrowserRouter>
            <React.Suspense fallback={loadingComponent}>
                <Switch>
                    <LayoutRoute exact path="/:sid" component={OrderPage} />
                    <LayoutRoute exact path="/:sid/register" component={RegisterNewUser} />
                    <EmptyLayoutRoute exact path="/:sid/login" component={LoginOrRegister} />
                    <LayoutRoute exact path="/newvendor" component={RegisterNewVendor} />

                    <ProtectedRoute exact path="/:sid/profile" component={UserProfile} />
                    <ProtectedRoute exact path="/:sid/checkout" component={Checkout} />

                    <Route exact path="/:sid/d">
                        <Redirect to="/:sid/dashboard" />
                    </Route>

                    <DashboardLayoutRoute exact path="/:sid/dashboard" component={DashboardBranch} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/branch" component={DashboardBranch} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/product" component={DashboardProduct} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/region" component={Panel} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/scenario" component={DashboardScenario} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/message" component={DashboardMessage} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/orders" component={DashboardOrders} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/" component={UnAuthorizedAccess} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/report/sale" component={DashboardSaleReport} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/setting" component={DashboardSetting} />
                    <DashboardLayoutRoute exact path="/:sid/dashboard/users" component={DashboardUsers} />

                    <EmptyLayoutRoute exact path="/:sid/dashboard/login" component={DashboardLogin} />
                    <Route exact path="/:sid/p" component={DashboardProduct} />
                    <Route exact path="/unauthorized" component={UnAuthorizedAccess} />
                    <Route component={InvalidUrl} />
                </Switch>
            </React.Suspense>
        </BrowserRouter>

【问题讨论】：

<Route exact path="/dashboard" component={Dashboard} /> 工作吗？
是的，它可以工作，没问题
最佳做法是使用末尾的参数，如<Route exact path="/dashboard/:vendorCode" component={Dashboard} />
我知道，但在这种情况下，我想将参数作为基本 url 的一部分

标签： reactjs parameters react-router navigation router

【解决方案1】：

我发现问题

我的路由是正确的

有问题的代码是这样的：

const DashboardProtectedRoute = ({ component: Component, ...rest }) => {
    return (
        < Route {...rest} render={props => {
            return rest.dashboardLoggedInUser ? (
                < Layout {...rest}>
                    <Component {...props} />
                </Layout >

            ) :
                (
                    <Redirect
                        to={{
                            pathname: "/dashboard/login",
                            state: { from: props.location }
                        }}
                    />
                );
        }}
        />
    );
};

我忘记给 DashboardProtectedRoute 组件添加参数

这是经过编辑的版本，它工作正常：

const DashboardProtectedRoute = ({ component: Component, ...rest }) => {
    return (
        < Route {...rest} render={props => {
            return rest.dashboardLoggedInUser ? (
                < Layout {...rest}>
                    <Component {...props} />
                </Layout >

            ) :
                (
                    <Redirect
                        to={{
                            pathname: `/${vendorCode}/dashboard/login,
                            state: { from: props.location }
                        }}
                    />
                );
        }}
        />
    );
};

【讨论】：

【解决方案2】：

可能与其他路线冲突，您可以分享您的所有路线吗？或禁用所有其他路由并再次检查

【讨论】：