反应路由器根元素与参数

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 组件都无效，因为 app/page 的根仍然是 /。

例如

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

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

有没有办法配置 React Router 以将 /:organizationId/ 视为根？

Answer 1

如果您查看 React 路由器文档，它看起来像是相对链接，因为 React-Router 不支持字符串。目前仅支持绝对链接。

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

但是，我认为您正在寻找的是参数。 React-router 将参数作为 props 传递给连接到路由的每个组件。例如，在您的概览组件中应该有 params 道具。你应该可以做类似

如果有帮助请告诉我！

反应路由器根元素与参数

React Router root element with param

typescript

reactjs

react-router

react-redux-form