如何在路由内使用带有参数的反应路由器，如'sitename.com/parameter/dashboard'

Question

我正在开发基于 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>

Answer 1

可能和其他路线冲突，能分享一下你的路线吗？或禁用所有其他路线并再次检查

Answer 2

我找到问题了

我的路由是正确的

有问题的代码是这样的：

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 }
                        }}
                    />
                );
        }}
        />
    );
};

如何在路由内使用带有参数的反应路由器，如'sitename.com/parameter/dashboard'

how to use react router with parameter inside route like 'sitename.com/parameter/dashboard'

navigation

parameters

router

reactjs

react-router