React Router With hooks -无法导航到屏幕

Question

我有一个联系人屏幕，按下"继续"按钮应该允许我导航到"确认;屏幕上。我已经从react-router使用了{useHistory}，并将onClick()设置为history.push('file')，但我仍然无法导航到所需的屏幕。下面是Routes.js文件:

import React, { Component } from "react";
import { Router, Switch, Route } from "react-router-dom";
import Review from "./ReviewScreen";
import Contact from "./Contact";

function Routes(props) {
return (
<Router history={props}>
<Switch>
<Route path="/" exact component={Contact} />
<Route path="/Review" exact component={Review} />
</Switch>
</Router>
)
}
export default Routes;

Contact组件:

import React, {useState} from 'react';
import './Contact.css';
import routeChange, {useHistory, Redirect} from 'react-router';
import {BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom';
function Contact() {
const history = useHistory();
return (
<div className="Contact">
<header className="Contact-header">
<div className="ButtonAlign">

<button className="button">Previous</button>
{/*Pressing this button should navigate*/}
<button className="button" onClick={()=> history.push("/Review")}>Continue</button>

<button className="button">Cancel</button>
</header>
</div>
);
}
export default Contact;

Answer 1

兄弟，你不需要在你的路由器标签中使用props作为历史记录，因为默认情况下useHistory钩子是连接到BrowserRouter的，只需要从BrowserRouter中导入路由器并删除props，它就会工作....这是你的App.js文件(修改)

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Review from "./ReviewScreen";
import Contact from "./Contact";
function Routes(props) {
return (
<Router>
<Switch>
<Route path="/" exact component={Contact} />
<Route path="/Review" exact component={Review} />
</Switch>
</Router>
);
}
export default Routes;