更改網址並重新渲染反應路由器

Question

我嘗試使用 react router 更改 url，如下所示：

const DashBoard = lazy(() => import("./dashboard/DashBoard"));
const ProjectSubmission = lazy(() => import('./projectsubmission/ProjectSubmission'));
const NotFound = lazy(() => import("./notfound/NotFound"));

class App extends Component {
render() {
             <div className="App">
                    <header className="App-header">
                        <Router history={history}>
                            <Suspense fallback={}>
                                <Switch>
                                    <Route path="/dashboard/" render={() => <DashBoard/>}/>
                                    <Route path="/project-submission/" render={() => <ProjectSubmission/>}/>
                                    <Route path="*" render={() => <NotFound/>}/>
                                </Switch>
                            </Suspense>
                     </header>
               </div>
           }
}

在我的組件中，我的代碼如下：

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

class ProjectSubmission extends React.Component{
    constructor(props){
        super(props);
        this.state = {location: ""}
    }

    render() {
        return(
            <div>
                <h2>Project Submission</h2>
            </div>
        )
    }
}


export default withRouter(ProjectSubmission);

但是，當我使用History.push或<Link/>更改組件時，url 已更改但不會重新呈現，並且將顯示NotFound Page，我應該刷新頁面，然后將顯示該組件。 我該怎么辦？

Answer 1

我的錯誤是我{Router} from 'react-router-dom'導入{BrowserRouter as Router} from 'react-router-dom'我應該{Router} from 'react-router-dom'導入{BrowserRouter as Router} from 'react-router-dom' ，我認為這是常見的錯誤，希望對您有所幫助。