Блог

Я видел несколько ответов на этот вопрос, но все еще не мог понять

Я использую

 `"  "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",`
 

// app.js

 import history from "./history";
import { Router } from 'react-router';

export const App = () => {
  return (
    <ReduxProvider store={store}>
      <Router history={history}>
        <div>
          <Route path="/first/" component={MN} />                
          <Route path="/test/" component={Test} />
        </div>     
      </Router>
    </ReduxProvider>
  );
};
 

// history.js

 import { createBrowserHistory } from 'history';

export default createBrowserHistory();
 

//вызов компонента

 import history from "./history";
....

history.push('mn/testing')
 

//mn.js

 import history from "../history";
const Mn = () => {
  return (
    <div>
       <Router history={history}>
        <Route exact path="*/testing" component={DashBoard} />
        
        />
      </Router>
     
    </div>
  );
 

Изменить: У меня есть вложенные маршруты, это создает ошибку?

Вы должны попробовать использовать useHistory() крючок, предоставленный react-маршрутизатором

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

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}