history.push 更改 URL 但不呈现任何组件答案

【问题标题】：history.push changes URL but does not render any componenthistory.push 更改 URL 但不呈现任何组件
【发布时间】：2023-03-21 13:03:01
【问题描述】：

我是 React 新手，我正在尝试使用 useHistory 来链接我的页面。但是，只有 URL 正在更改，页面没有重新加载或更改（我有一个空白页面）。我错过了什么？

App.tsx：

import React from 'react';
import { createMuiTheme, fade, makeStyles } from '@material-ui/core/styles';
import logo from './logo.svg';
import './App.css';
import {
    BrowserRouter as Router,
    Switch,
    Route,
} from "react-router-dom";


import Home from './pages/Home';
import OrganizerHome from './pages/organizer/accueilOrganizer'
import HomeContact from './pages/contact/accueilContact'

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#87cefa'
        }
    }
});


function App() {
    return (
        <div className="App">
            <Router>
                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route exact path="/organizer" component={OrganizerHome}/>
                        <Route exact path="/contact" component={HomeContact}/>
                    </Switch>
            </Router>
        </div>
    )
}

export default App

我如何在所有文件中使用 useHistory（例如： accueilOrganizer.tsx）：

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

export default function Home() {
   const history = useHistory();
   
   return (
      <div>
         <Button onClick={() => history.push("/organizer")}>Organizer</Button>
      </div>
   )
}

<OrganizerHome /> 的代码很简单，因为我想测试 history.push ：

import React from 'react';
import { useHistory } from 'react-router-dom';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import {
    Today,
} from '@material-ui/icons';
import {
    Button,
    Theme,
    createStyles,
} from '@material-ui/core'

const useStyles = makeStyles((theme: Theme) => createStyles({
    home: {
        paddingTop: '5em',
    },
}));

export default function OrganizerHome() {
    const history = useHistory();
    const classes= useStyles();
    return (
        <div className={classes.home}>
            <p>Pour voir le calendrier, c'est par ici !</p>
            <Button onClick={() => history.push('/organizer/essai')}><Today /></Button>
        </div>
    )
}

【问题讨论】：

你的 ReactDom.render 中也有 Router 吗？如果是，则从 App.jsx 文件中删除路由器
不确定这是否是问题所在，但您使用的是名为 <Button /> 的组件，至少在您的示例中没有导入它。
能否分享一下<OrganizerHome /> 组件中的代码？
我在 ReactDom.render 中没有路由器，但我确实导入了 <Button />（我试图展示我通常所做的事情，但我忘记了，抱歉......）。

标签： reactjs

【解决方案1】：

你可以这样做。

import React from 'react';
import { withRouter } from "react-router-dom";
function Home(props) {
  
    const sendData = () => {
        props.history.push({
            pathname: '/organizer',
            // If you want to push somedata then you send through state
            state: {
                date: "Data"
            }
        });
    };
   
   return (
      <div>
         <button onClick={sendData}>Organizer</button>
      </div>
   )
}


export default Home(InputData);

然后在组织部分你可以得到state这样的日期**props.location.state.date**

【讨论】：