React：如何在 ReactJS 中删除重复的路由名称

Question

我正在做 ReactJS 项目。实际上，我在我的项目中使用React-Router 3.2.0，但我在项目中遇到了一些问题。我使用组件名称为organization 我为organization 定义了路线，它工作正常，但是当我单击按钮以在organization component 中打开注册表时它也工作正常，因为我还定义了打开表单的路线。问题是，当我单击菜单打开组织或任何其他页面时，它显示为 organization/organizaton 或 organization/products 。当用户从注册页面点击菜单时，我想删除像 /products 这样的第二个名字。

对不起！如果我因为不是演讲者而写错了英语。

import React, {Component} from 'react'
import {Router, Route, IndexRoute, browserHistory} from 'react-router'

// Components
import Dashboard from './../../pages/DashboardPage/Dashboard'
import Organization from './../../pages/Organization/Organization'
import Products from './../../pages/Products/Products'
import SalesOrder from './../../pages/SalesOrder/SalesOrder'
import Purchase from './../../pages/Purchase/Purchase'
import Shipments from './../../pages/Shipment/Shipment'
import Everything from './../../pages/Everything/Everything'
import Report from './../../pages/Report/Report'
import Logout from './../../pages/Logout/Logout'
import OrganizationForm from '../../pages/Organization/OrganizationForm'
import App from './../../../src/App'
import {IntlProvider} from 'react-intl'
import AppLocale from '../../lang'
import {connect} from 'react-redux'
// Routing for pages
class Routes extends Component {
    render() {
        const {locale} = this.props
        const currentAppLocale = AppLocale[locale]
        console.log(currentAppLocale)
        return (
            <IntlProvider
                locale={currentAppLocale.locale}
                messages={currentAppLocale.messages}
            >
                <Router history={browserHistory}>
                    <Route path="/" component={App}>
                        <IndexRoute exact component={Dashboard} />
                        <Route path="dashboard" exact component={Dashboard} />
                        <Route
                            path="organization"
                            exact
                            component={Organization}
                            menu='Organization'
                        />
                        <Route path="products" exact component={Products} />
                        <Route path="sales" exact component={SalesOrder} />
                        <Route path="purchase" exact component={Purchase} />
                        <Route path="shipments" exact component={Shipments} />
                        <Route path="everything" exact component={Everything} />
                        <Route path="reports" exact component={Report} />
                        <Route path="logout" exact component={Logout} />
                    </Route>
                    <Route path="organization/new" exact component={OrganizationForm} />
                </Router>
            </IntlProvider>
        )
    }
}

const mapStateToProps = ({settings}) => {
    const {locale} = settings
    return {locale}
}

export default connect(
    mapStateToProps,
    {}
)(Routes)

生成链接的代码

 {menus.map(item => {
          return (
            <Link to={item.name} name={item.name} key={item.name}
              className={this.state.activeMenu === item.name ? 'menu active' : 'menu' }
              onClick={() => this.setState({ activeMenu: item.name })}
              >
              <Icon name={item.icon} size="large"/>
              <span>{item.name}</span>
            </Link>

Answer 1

您可以使用基本名称轻松实现，这里是文档https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string的链接

//The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.

<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">

希望这会有所帮助！