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">

Надеюсь, это поможет!