История маршрутизатора React всегда перенаправляет на страницу 404

#javascript #reactjs #react-router

#javascript #reactjs #react-маршрутизатор

Вопрос:

js и сталкивается с трудностями с react router dom. Я хочу изменить маршрут, когда нажимаю кнопку в своем компоненте панели навигации.

Это мой App.js компонент.

 import {  Router, Route, Switch } from "react-router-dom";

function App() {
  const classes = useStyles();
  return (
    <Provider store={store}>
    
        <div className={classes.root}>
          <NavBar />
          <Drawer />
          <Router history={history}>
            <Switch>
              <Route path="/" exact component={Login}></Route>
              <Route path="/country" exact component={Country}></Route>
              <Route path="/user-create" exact component={User}></Route>
              <Route path="/countries" exact component={ListView}></Route>
              <Route component={NotFound}></Route>

            </Switch>
          </Router>
        </div>
     
    </Provider>
  );
}

И здесь я передаю history prop компоненту маршрутизатора.
History.js

 import { createBrowserHistory } from 'history';

export default createBrowserHistory();

Drawer.js

 import history from '../../history'

 const onRoute = (path) => {
    
    history.push("/user-create");
    // props.toggleDrawer();
  }

В Drawer.js это всегда маршрут к NotFoundComponet.
Почему это могло произойти?

1. Попробуйте обернуть свой компонент Drawer внутри маршрутизатора!

2. @DILEEPTHOMAS Вы имеете в виду создать новый маршрут для ящика?

3. @ Pathum, нет, просто переместите маршрутизатор над компонентом ящика, оберните компонент ящика также маршрутизатором, попробуйте

4. Все кажется правильным. Вы действительно делаете history.push("/user-create"); или history.push(path); ? NotFoundComponet будет отображаться, когда path принимает значение, отличное от — / , /country , /user-create или /countries .

5. Можете ли вы опубликовать минимальный, воспроизводимый пример?

Ответ №1:

В ваших компонентах NavBar и Drawer включите приведенный ниже withRouter или хук alt useHistory, чтобы получить доступ к реквизиту истории.

 import { withRouter } from 'react-router'
...
this.props.history.push('/user-create')
...
export default withRouter(...

1. В этом нет необходимости withRouter , OP импортирует history объект в Drawer компоненте.

2. @Yousaf Это работает, и я импортирую {BrowserRouter как маршрутизатор}. Я думаю, что с этим все работает.

3. @PathumKalhan это работает, потому что вместо использования history объекта, импортированного явно, вы используете history объект, переданный в качестве реквизита из-за withRouter компонента более высокого порядка, НО импорт history объекта, как вы находитесь в Drawer компоненте, также должен работать.

Ответ №2:

Я бы поместил <NavBar /> и <Drawer /> внутрь <Router> и сделал

 const { push } = useHistory()   // from react-router-dom

внутри них, чтобы получить ссылку на push API