Question

我正在重写一个ASP.NET MVC应用程序，以便在TypeScript中使用React和Redux。对于路由我使用React Router。该站点使用根目录中的参数来标识客户的组织。

实施例; www.oursite.com/:organizationId 有很深的链接，比如 www.oursite.com/:organizationId/overview 或 www.oursite.com/:organizationId/account/:accountId

我已将React路由器配置如下

import * as React from 'react';
import { Router, Route, IndexRoute, HistoryBase } from 'react-router';
import { Layout } from './components/Layout';
import Home from './components/Home';
import OverView from './components/OverView';
import Account from './components/Account';

export default <Route path='/:organizationId' component={ Layout }>
    <IndexRoute components={{ body: Home }} />
    <Route path='overview' components={{ body: OverView }} />
    <Route path='account/:accountId' components={{ body: Account }} />
</Route>;

这样可行，但页面上的任何链接组件都没有，因为应用程序/页面的根目录仍为/。

例如

<Link to={'/overview'} activeClassName='active' />

帐户控制链接 www.oursite.com/overview ，而不是 www.oursite.com/:organizationId/overview 。

有没有办法配置React路由器将 /：organizationId / 视为根？

Answer 1

如果您查看react路由器文档，看起来反应路由器不支持相对链接作为字符串。目前仅支持绝对链接。

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#link

但是，我认为你要找的是params。 React-router将params作为props传递给连接到路由的每个组件。例如，在您的概述组件中，应该参考para。你应该可以做类似

的事情

请告诉我这是否有帮助！

用param反应路由器根元素

1 个答案: