Question

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.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。 为什么会发生这种情况？

Answer 1

在NavBar和Drawer组件中，包括以下withRouter或alt useHistory挂钩，以访问历史道具。

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

Answer 2

我将<NavBar />和<Drawer />放在<Router>内，然后做

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

在其内部，以获取push API的引用

反应路由器历史记录推送始终路由到404页面

2 个答案: