reactjs - 在不显示页面的情况下更改 url

Question

导航到应用程序页面时出现问题。单击时，url 会改变，但内容不会改变。包裹在 withRouter 中，但没有帮助。我正在使用 webpack 5，但我没有为路由配置任何东西。这个实现的问题可能出在哪里？

应用程序.js

import logo from './logo.svg';
import history from "./utils/history";
import './App.css';
import AuthLayout from "./containers/auth-controller";
import Menu from './components/menu';
import {
    Router,
    Switch,
    Route
} from "react-router-dom";
import routes from './routes'

function App() {
    return (
        <Router history={history}>
                <AuthLayout>
                    <div className="App">
                        <Menu/>
                        <div className="page">
                            {routes}
                        </div>
                    </div>
                </AuthLayout>
            </Router>
    );
}

export default App;

index.js

import history from "./utils/history";

let React = require('react');
let ReactDOM = require('react-dom');
import './index.css';
import 'antd/dist/antd.css';
import App from './App';
import {Provider} from "react-redux";
import store from "./store";
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <Provider store={store}>
        <React.StrictMode>
            <App/>
        </React.StrictMode>
    </Provider>,
    document.getElementById('root')
);

路由.js

import React from 'react';
import { withRouter } from 'react-router-dom';
import { Route } from 'react-router-dom';
import Component from './component';

export default <Route exact path="/tests" component={Component} />;

路由.js

import React from 'react';
import { Switch, Redirect } from 'react-router-dom';
import * as Pages from './pages';

export default (
    <Switch>
        { Object.values(Pages) }
    </Switch>
);

组件.js

import React from 'react';
import {connect} from "react-redux";
import {withRouter} from "react-router-dom";
import history from "./history";




class Component extends React.Component {
    state = {
        username: undefined,
        password: undefined
    }

    onRedirect = () => {
history.push("/home");
}

    render() {
        const {token} = this.props;
        return (
            <div className="auth">
                <a onClick={this.onRedirect}>Redirect</a>
            </div>
        )
    }
}


function mstp(state) {
    return {
        ...
    }
};

function mdtp(dispatch) {
    return {
        ...
        }
    }
}

export default withRouter(connect(mstp, mdtp)(Component));
export default withRouter(connect(mstp, mdtp)(Component));

历史.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

标签： reactjsrouteshistory