Question

我是 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>
    )
}

Answer 1

你可以这样做。

       $m = $this->_query
             ->select('users.*')
             ->leftjoin('user_field_data', function($query) {
            return $query->on('users.id', 'user_field_data.user_id')->where('user_field_data.field_id', 23);
            })->orderBy('user_field_data.value', $direction)->get();

然后在组织部分，您可以像这样获得 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

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

1 个答案: