react-router-dom : 更新 url 但不渲染新组件

用户1462617

我一整天都对这个问题有点迷茫。在按钮上单击 url 更改但不呈现新页面，我不明白为什么。

我正在使用 react-dom-router 5.2.0

                       INDEX JS

 import {Router} from 'react-router-dom';
 import history from './history';

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

                           APP JS

import Server from './Server';
import React from 'react';

function App() {
  return (

   <Server />

  );
}

export default App;

                           SERVER JS

export default class Server extends Component
{
render()
    {


        return(


            <div className="Homepage" >

                <h1 className="header">Server</h1>



                     <button  className="button" 
                    onClick={() => history.push('/control')}>
                            Lets go
                    </button>

                }

      </div>

        );  
    }
}

请注意：我<Control/>直接在上面的渲染方法中添加了它，它可以很好地渲染组件。

                        CONTROL JS

import React, {Component} from 'react';
import Page2_View from './Page2_View';

export default class Control extends Component
{
    constructor(props)
    {
        super(props);
    }

    render()
    {
        return(

            <Page2_View/>

        );


    }

}

                    Page2_View

import React, {Component} from 'react';

const Page2_View = (props) =>
{
    return(

        <h1> PAGE 2 VIEW </h1>

    );
}

export default Page2_View;

         ROUTES JS

import {BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
const Routes = () =>
{
    return(

            <Router>
                <div>
                    <Switch>
                        <Route exact path="/test" component={Server}/>
                        <Redirect from = '/test' to = '/control'/>
                        <Route exact path="/control" component={Control}/>
                    </Switch>
            </div>
            </Router>

    );

}

export default Routes;

                          HISTORY JS

import {createBrowserHistory as history} from 'history';

export default history();

我感谢所有的帮助。谢谢

用户1462617

我已经意识到我做错了什么并且能够解决我的问题。

关键是要了解 react-router-dom 的 Router 模块带有三个 props ： path 、 history 和 component。

因此，为了在按钮上重定向页面，单击所有我必须在 App.js 中的标记之间嵌入我的所有路由

                     APP JS
function App() {
  return (
  <Router>
        <Switch>
            <Route exact path="/test" component={componentA}/>
            <Route exact path="/test2" component={componentB}/>

        </Switch>
</Router>

  );
}

export default App;

然后你可以使用按钮 onClick 重定向

                               COMPONENTA JS
<button variant="secondary" 
                        className="button" size="lg" 
                        onClick={() => this.props.history.push('/test2')}>
                         RedirectTo
                     </button>

希望这对遇到此问题的其他人有所帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。