Маршрутизатор реакции - разные ссылки на разных страницах

#reactjs #react-router #react-router-dom

Вопрос:

У меня есть навигация с реакцией.Пути маршрутизатора следующие:

пример 1: приводит к «/пример1»
пример 2: приводит к «/пример2»
пример 3: приводит к «/example3»

если я нажму пример 3 на начальной странице (/), я хочу перейти к «/пример3». если я нажму пример 3 на странице примера 2 (/пример 2), я хочу перейти к «/?id=x».

Как я могу этого достичь? В моем случае он отображается только один раз, а затем застрял на нем.

Заранее благодарю вас, Джей Доу

1. if I click example 3 from the example2 page вы написали какой-нибудь код для этого? Если да, пожалуйста, предоставьте то же самое

2. да, здесь: <Переключатель> <Переключатель><Путь маршрута={«пример1»} компонент={пример1}/> {окно. location.href.включает(«/информация/») ? ( <Путь маршрута={«?идентификатор=x»} компонент={пример3}/> ):(<Путь маршрута={«?идентификатор=x»} компонент={пример3}/><Путь маршрута={«пример3»} компонент={пример3}/>)} <Путь маршрута={«пример3»} компонент={пример3}/><Точный путь маршрута={«/»} компонент={начальная страница}/> <Точный путь маршрута={«/»} компонент={начальная страница}/></Переключатель>

Ответ №1:

Было бы гораздо лучше, если бы вы могли предоставить нам образец вашего кода. Но, как правило, для обработки чего-то подобного наш код будет выглядеть примерно так, как показано ниже:

 import React from 'react'
import { useHistory } from 'react-router-dom'

export default function App() {
  const history = useHistory()

  return (
    <div>
      <button onClick = {() => history.push('/example1')}>go to example 1</button>
      <button onClick = {() => history.push('/example2')}>go to example 2</button>
      <button onClick = {() => history.push('/example3')}>go to example 3</button>
    </div>
  );
}

и вам нужно определить свои маршруты в компоненте маршрутизации как bewlo:

     import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
    
    export default function Routings() {
       <Router>
            <Switch>
                <Route path="/example1" component={Example1} />
                <Route path="/example2" component={Example2} />
                <Route path="/example3" component={Example3} />
            </Switch>
        </Router>
}