javascript - React Router useHistory. History.push changes url but does not load component - Stack Overflow

admin管理员组

文章数量:1332896

I want to have a simple button that when clicked redirects a user to a route defined in my Index.tsx file.

When the button is clicked, the url bar is correctly changed to "/dashboard", however my ponent (just an h1) does not appear. If I reload chrome at that point it will appear.

Here's my code (Index.tsx):

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Route, Switch } from "react-router-dom";
import { Router } from "react-router";
import { createBrowserHistory } from "history";
import Dashboard from "./ponents/Dashboard";

const appHistory = createBrowserHistory();

ReactDOM.render(
  <React.StrictMode>
    <Router history={appHistory}>
      <Switch>
        <Route exact path="/" ponent={App} />
        <Route path="/dashboard" ponent={Dashboard} />
      </Switch>
    </Router>
  </React.StrictMode>,
   document.getElementById("root")
  );

Here's my start of a Login form (the first route above, App, renders it). (Login.tsx):

 import React, { useState } from "react";
 import {Button} from "@material-ui/core";
 import { useHistory} from "react-router-dom";

 export const Login: React.FC = (props) => {
     const classes = useStyles();
     let history = useHistory();

     const [email, setEmail] = useState<string>("");
     const [password, setPassword] = useState<string>("");

     const validateForm = (): boolean => {
        return true;
     };

     const handleLoginClick = (
       event: React.MouseEvent<HTMLButtonElement, MouseEvent>
      ) => {
         history.push("/dashboard");
     };

     return (
        <form>
         <div>
           <Button
            onClick={handleLoginClick}
            color="inherit"
            type="button"
           >
            Login
           </Button>
         </div>
        </form>
       );
 };

 export default Login;

I want to have a simple button that when clicked redirects a user to a route defined in my Index.tsx file.

When the button is clicked, the url bar is correctly changed to "/dashboard", however my ponent (just an h1) does not appear. If I reload chrome at that point it will appear.

Here's my code (Index.tsx):

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Route, Switch } from "react-router-dom";
import { Router } from "react-router";
import { createBrowserHistory } from "history";
import Dashboard from "./ponents/Dashboard";

const appHistory = createBrowserHistory();

ReactDOM.render(
  <React.StrictMode>
    <Router history={appHistory}>
      <Switch>
        <Route exact path="/" ponent={App} />
        <Route path="/dashboard" ponent={Dashboard} />
      </Switch>
    </Router>
  </React.StrictMode>,
   document.getElementById("root")
  );

Here's my start of a Login form (the first route above, App, renders it). (Login.tsx):

 import React, { useState } from "react";
 import {Button} from "@material-ui/core";
 import { useHistory} from "react-router-dom";

 export const Login: React.FC = (props) => {
     const classes = useStyles();
     let history = useHistory();

     const [email, setEmail] = useState<string>("");
     const [password, setPassword] = useState<string>("");

     const validateForm = (): boolean => {
        return true;
     };

     const handleLoginClick = (
       event: React.MouseEvent<HTMLButtonElement, MouseEvent>
      ) => {
         history.push("/dashboard");
     };

     return (
        <form>
         <div>
           <Button
            onClick={handleLoginClick}
            color="inherit"
            type="button"
           >
            Login
           </Button>
         </div>
        </form>
       );
 };

 export default Login;

• javascript
• reactjs
• typescript
• react-router
• material-ui

Share Improve this question Follow edited Sep 16, 2020 at 3:05 ksav 20.9k66 gold badges5151 silver badges6969 bronze badges asked Sep 16, 2020 at 1:26 MattoMKMattoMK 66911 gold badge1515 silver badges3030 bronze badges 1

• 2 working example Let me know if you have questions. It seems that using the Router ponent from 'react-router' does not work. but using the Router from 'react-router-dom' does – Liron Commented Sep 16, 2020 at 1:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Replace this line

import { Router } from "react-router"

with

import {BrowserRouter as Router } from "react-router-dom";

Try importing the Router from react-router-dom - the rest seems correct

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

react-router is mostly for internal usage - you only interact with react-router-dom

本文标签： javascriptReact Router useHistory Historypush changes url but does not load componentStack Overflow