‹Link› от response-router-dom не меняет URL

В настоящее время я занимаюсь созданием веб-сайта и упираюсь в это. Я использую response-router-dom для маршрутизации моего приложения и немного новичок в нем, но на одной странице ссылка, которую я помещаю на страницу, не меняет URL-адрес

Я уже пробовал использовать предыдущий компонент, в котором я помещал кнопку на один компонент, а затем использовал ссылку для загрузки другого компонента на основе данных ссылки и маршрута. Однако на этом, несмотря на использование аналогичной структуры, что и раньше, вообще не работает

Это код загружаемой страницы. Я уже импортировал BrowserRouter как ссылку из response-router-dom

<div>
  <p>TEST</p>
   <Link to="/leadslist"><button class="btn btn-success">Back to Leads List</button></Link>
</div>

Это целевая страница

            <div>
            <Router>
                <Switch>
                    <Redirect from="/leads" to="/leadslist" />
                    <Route path="/leadsForm" component={LeadsForm} />
                    <Route path="/leadslist" component={LeadsList} />
                    <Route path="/leaddetails" component={LeadsDetails}/>
                 </Switch>
            </Router>
            </div>

Моя предыдущая попытка нажатия кнопки из «/ leadlist» в «/ leadForm» действительно работала, но затем я пытаюсь загрузить в «leaddetails», чтобы попытаться вернуться к «/ leadlist», но это не меняет URL вообще. Любая помощь будет по достоинству оценена.


reactjs javascript react-router
person Surya Putra    schedule 06.08.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы не должны импортировать BrowserRoute как Link из react-router-dom. Оба разные вещи. Вам нужно импортировать Link прямо из react-router-dom. Отдыхай, он должен работать прочно.

Вы должны импортировать link следующим образом:

import { Link } from "react-router-dom";

Я не уверен, что именно происходит с вашим приложением. Но здесь я создал очень простую демонстрацию или работающую реакцию - роутер с использованием CodeSandBox. Вы можете взглянуть, это должно помочь вам решить возникшую проблему.

Вы также можете прочитать эту статью, чтобы лучше понять работу реагирующего маршрутизатора.

person Saqib    schedule 06.08.2019
comment
Вау, спасибо, это сразу работает. Если я могу знать, чем отличается использование тех, у которых есть {BrowserRouter as Router, Route, Link}, и тех, которые напрямую связаны с {Link} и т. Д.? - person Surya Putra; 06.08.2019
comment
{BrowserRouter as Router, Route, Link} импортирует три вещи, Router, Route, and Link. Пока {Link} импортирует только ссылку. Вероятно, ошибка, которую вы сделали, заключалась в том, что вы импортировали BrowserRouter as Link, что означает BrowserRouter с именем Link. Затем вы использовали Link (BrowserRouter) для перехода к этому маршруту. Вместо этого вам нужен был только настоящий Link. Вы можете прочитать далее в статье, на которую я ссылался в ответе. - person Saqib; 06.08.2019

arrow_upward
1
arrow_downward

Ваш код не работает, потому что вы добавили кнопку внутри тега Link, поэтому при нажатии кнопки React запускается только метод кнопки onClick, и ссылка не будет нажата!

Итак, в решении вы можете удалить кнопку из тега Link

<Link to="/leadslist">Back to Leads List</Link>

или вы можете использовать решение ниже,

Вместо добавления кнопки в ссылку Вы должны сделать это,

import withRouter from 'react-router-dom'   
const Component = (props) => {
    <div>
        <Button onClick={()=>props.history.push('/leadslist')}
    </div>
  }
export default withRouter(Component)

Добавьте HOC withRouter в свой компонент, и вы можете получить объект истории в prop.

person Sangam Rajpara    schedule 06.08.2019