Нежелательный рендеринг на той же странице с реакции-роутер-дом

Question

В настоящее время я работаю с React-router-dom (React router 4) и мне нужна страница с подробной информацией для клиентов.Я могу получить все данные успешно, но данные отображаются на той же странице, что и список / обзор.Изображение прояснит вещи. Я хотел бы иметь два отдельных представления.

Это структура маршрутизатора:

const unauthenticatedPages = [
  '/',
  '/login'
];
const authenticatedPages = [
  '/admin'
];

// public pages
const publicPage = () => {
  if(Meteor.userId()) {
    history.push('/');
  }
};

// private pages
const privatePage = () => {
  if(Meteor.userId()) {
    history.push('/');
  }
};

// check authentication for pages
export const onAuthenticationChange = (authenticated) => {
  console.log('is authenticated...', authenticated);

  const path = this.location.pathname;
  const isUnauthenticatedPage = unauthenticatedPages.includes(path);
  const isAuthenticatedPage = authenticatedPages.includes(path);

  if( authenticated && isUnauthenticatedPage ) {
    console.log('Can view the page routed to the path dashboard');
  } else if (!authenticated && isAuthenticatedPage) {
    console.log('No rights to view the page... routed to the path 
    login page');
  }
}

// render app inside custom templates
const RouteWithLayout = ({layout, component, ...rest}) => {
  return (
   <Route {...rest} render={ (props) => React.createElement( layout, props, React.createElement(component, props)) } />
  );
};

export const routes = (
  <BrowserRouter>
    <Switch>
        <RouteWithLayout exact path="/" layout={AuthenticationLayout} onEnter={publicPage} component={AuthLogin} />
        <RouteWithLayout path="/login" layout={AuthenticationLayout} onEnter={publicPage} component={AuthLogin} />

        <AdminLayout>
            <Route path="/admin" component={AdminDashboard} />
            <Route path="/klanten/:customerID" component= . {CustomerDetails} />
            <Route path="/klanten" component={CustomerOverview} />

            <Route path="/nieuwe-klant" component={CustomerCreate} />
        </AdminLayout>

        <Route path="*" component={PageNotFound} />
    </Switch>
</BrowserRouter>
);

Дополнительная информация: у меня есть еще некоторые проблемы с этим маршрутизатором.Я использовал alanning: role, потому что пользователи должны быть маршрутизаторами в зависимости от их роли.На изображении показана область администратора, но пользователи будут использовать симуляцию с меньшим количеством опций.Как мне этого добиться?

Если я использую отдельный маршрут, например / new-customer /, я вижу новую страницу только с формой, но я бы хотел использовать / customer / new / в качестве маршрута.Если я изменю маршрут на / customer / new /, моя страница не будет отображена.

Код страницы / new-customer /:

class CustomerCreate extends Component {
  constructor(props) {
    super(props);
    this.state = {
        message: ''
    };
  }
  onFormSubmit(event) {
    event.preventDefault();

    const relationNumber                = this.refs.relationNumber.value;
    const companyName                   = this.refs.companyName.value;
    const locationStreet                = this.refs.locationStreet.value;
    const locationPostal                = this.refs.locationPostal.value;
    const locationCity                  = this.refs.locationCity.value;
    const contactPersonName         = this.refs.contactPersonName.value;
    const contactPersonEmail        = this.refs.contactPersonEmail.value;
    const contactPersonPhone        = this.refs.contactPersonPhone.value;
    const password                          = this.refs.password.value;
    const confirmPassword           = this.refs.confirmPassword.value;

    const checkEmail = (email) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const validated = regex.test(email);
        return validated;
    };

    const checkPassword = ( pwd, pwd2 ) => {
        if( pwd != '' || pwd2 != '' ){
            if ( pwd.length >= 5 ) { 
                if ( pwd === pwd2 ) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        }
    };

    const validatedEmail = checkEmail( contactPersonEmail );
    const validatedPassword = checkPassword( password, confirmPassword 
 ); 

    if(!validatedEmail) {
        this.setState({message: 'Het e-mailadres is niet correct.'});
    }
    if(!validatedPassword ) {
        this.setState({message: 'De wachtwoorden komen niet overeen!'});
    }

    if( validatedEmail && validatedPassword ) {
        try {
            const createdAccount = Accounts.createUser({
                email                       : contactPersonEmail,
                password                : password,
                relationNumber  : relationNumber,
                companyName         : companyName ,
                locationStreet  : locationStreet,
                locationPostal  : locationPostal,
                locationCity        : locationCity,
                contactName         : contactPersonName,
                contactPhone        : contactPersonPhone,
                isArchived          : 0,
                setRoles                : ['customer']
            });

            this.setState({message: 'De klant is succesvol toegevoegd!'});

            // send flashmessage of succesfull state

            return createdAccount;
        } catch( err ) {
            return err.reason;
        }
    }
    return false;
}

render() {
    return (
        <div>
         form sitting here ...
        </div>
    );
}
}
export default CustomerCreate;

Answer 1

Прямо сейчас React-Router сначала рендерит:

    <Route path="/klanten/:customerID" component= . {CustomerDetails} />

, а затем:

    <Route path="/klanten" component={CustomerOverview} />

, когда вы идете по любому пути, который включает /klanten.

Либо переименуйте один из двух маршрутов, либо добавьте точный = {true} следующим образом:

    <Route path="/klanten/:customerID" component= . {CustomerDetails} exact={true} />

Answer 2

Компонент Switch отображает только один из его немедленных дочерних элементов. Поскольку ваши маршруты /klanten и /klanten/:customerID не являются прямыми дочерними элементами компонента, они будут отображаться каждый раз, когда маршрут соответствует /klanten*

Вы можете использовать свойство exact на маршруте /klanten, чтобы оно не совпадало с маршрутом /klanten/:customerID.

<Route path="/klanten/:customerID" component= . {CustomerDetails} />
<Route path="/klanten" exact component={CustomerOverview} />

Answer 3

Это потому, что оба маршрута совпадают klanten. Попробуйте переименовать путь сведений о клиенте в kunde. Или, как предлагали другие, добавьте свойство exact в обзорный путь klanten.

Чтобы ответить на вопрос 2, вставьте customer/new перед customer/:id в свой переключатель. И убедитесь, что у клиента никогда не будет идентификатора «новый».