更改网址而不显示页面

问题描述

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

App.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')
);

Route.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} />;

Routes.js

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

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

component.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));

history.js

import { createbrowserHistory } from 'history';

export default createbrowserHistory();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

history reactjs reactjs routes