I'm trying some stuff with React router but stuck on how to render another component after clicking on submit button of the form.

index.tsx

import { Router } from "react-router-dom"
import { store, StoreContext } from "./app/stores/store"
import { createBrowserHistory } from "history"

export const history = createBrowserHistory()

ReactDOM.render(
    <React.StrictMode>
        <StoreContext.Provider value={store}>
            <Router history={history}>
                <App />
            </Router>
        </StoreContext.Provider>
    </React.StrictMode>,
    document.getElementById("root")
)

App.tsx

import {
    BrowserRouter as Router,
    Link,
    Route,
    Switch,
} from "react-router-dom"

<Router>
    <Navbar />
        <Switch>
            <Route exact path="/" component={Home} />
            <Route
                exact
                path="/profiles"
                component={UsersDashboard}
             />
            <Route
                path={`/profiles/:username`}
                component={UserProfile}
            />
            <Route exact path="/login" component={LoginForm} />
            <Route exact path="/contact" component={Contact} />
            <Route exact path="/about" component={About} />
            <Route component={NotFound} />
        </Switch>
</Router>

Every route work just fine except /login. I expected that after I submitted LoginForm, it will redirect me to the /profiles component. But it didn't. The route url changed but /profiles components content did not render.

loginForm.tsx

import { history } from "../.."

export default function LoginForm() {
    const [values, setValues] = useState({
        username: "",
        email: "",
        password: "",
    })

    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        // login feature is implemented in my custom store API 
        // I used hisoty.push to redirect to /profiles after form is submitted
        login(values).then(() => history.push("/profiles"))
    }

    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target
        setValues({
            ...values,
            [name]: value,
        })
    }

   // some irrelevant code too long so I cut it

   return (
        <div className="login__form">
            <form onSubmit={handleSubmit}>
                <h2>Login</h2>
                {inputs.map(input => (
                    <FormTextInput
                        inputProps={input}
                        key={input.id}
                        {...input}
                        value={input.name}
                        onChange={onChange}
                    />
                ))}
                <Button content="Submit" positive />
            </form>
        </div>
}

CodePudding user response：

You need hook useHistory from 'react-router-dom' but not from package 'history'

import { useHistory } from 'react-router-dom'
const history = useHistory();
history.push(...);