react-router-dom：更新 url 但不渲染新組件

Question

我一整天都在這個問題上迷失了方向。 在按鈕上單擊 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();

我感謝所有的幫助。 謝謝

Answer 1

我認為問題在於 react-router-dom 不知道你正在做的這個history.push('/control') ； 即如果你想重定向到另一條路線，它應該通過react-router，而不是在它之外。

你有幾個選擇：

• 使用useHistory鈎子：https://reacttraining.com/react-router/web/api/Hooks/usehistory

• 您的按鈕可以包含在 Link 組件中： https://reacttraining.com/react-router/web/api/Link

• 使用withRouter組件通過 props 獲取路由器，如： Programmatically navigate using react router V4中所述。

Answer 2

我已經意識到我做錯了什么並且能夠解決我的問題。

關鍵是要了解 react-router-dom 的 Router 模塊帶有三個 props：路徑、歷史記錄和組件。

因此，為了在按鈕上重定向頁面，單擊所有我必須在 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>

希望這對遇到此問題的其他人有所幫助！

Answer 3

在 server.js 文件而不是按鈕中，使用 navlink 或來自 reactrouter 的鏈接下面是一個簡單的代碼

 <NavLink to="/control">control</NavLink>

將每個組件導入路由組件，然后使用路由器開關和重定向語句，如下所示

import Main from './component/Main'
import Welcome from "./component/welcome"

import { Route, BrowserRouter as Router, Switch,Redirect } from 'react-router-dom'

function App() {
return (
<Router>
<Switch>

  <Redirect from="/" to="/home" exact />
  <Route exact path="/home" component={Main} />
  <Route path="/welcome" component={Welcome} />

</Switch>
</Router>
);}

export default App;

在您單擊導入鏈接或導航鏈接的組件中，我更喜歡使用導航鏈接並使用它在單擊時重定向到頁面

import { NavLink } from 'react-router-dom'

 <NavLink to="/home">home</NavLink>