История реакции.push() обновляет URL-адрес, но не переходит к нему в браузере?

#reactjs

Вопрос:

Когда я попытался запустить свой код реакции, я столкнулся с этой проблемой. Когда я нажимаю на кнопку входа в систему, она обновляет URL на http://localhost:3000/dashboard. Но не ориентируется.

Это мой код index.js

 import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
 

App.js

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

function App() {

 let history = useHistory();

 const handleclick = () => {

     history.push("/dashboard");

}

return (
<>
   <div className="container">
    
    <FormControl id="submit">
      
      <Button type="button" className="btn btn-danger mt-2" onClick={ handleclick }> Login </Button>
      
    </FormControl>
    
  </div>
  </>
 );
}
export default App;
 

Dashboard.js

 function Dashboard () {
return (
  <>
    <h1>hi</h1>
  </>
)
}


export default Dashboard;
 

Комментарии:

1. Где вы определили свой маршрут на панели мониторинга?

2. Вам нужно использовать переключатель маршрутизатора react и определить маршрут панели мониторинга в app.js .. Рабочий пример codesandbox.io/s/react-router-basic-forked-ojsuy

3. @maniraj Не могли бы вы дать небольшое объяснение. Почему ваш код работал, даже если базовый пример не был импортирован ни в один компонент?

4. @BoidurjaTalukdar, его уже импортировали в index.js файл ( codesandbox.io/s/react-router-basic-forked-qhdij?file=/index.js ) во имя App .. Когда мы используем экспорт по умолчанию, мы можем использовать любое имя для его импорта. Ссылка: medium.com/@etherealm/…