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>

        );  
    }
}

请注意：我直接在上面的render方法中添加了<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
您的按钮可以包装在链接组件中：https://reacttraining.com/react-router/web/api/Link
使用withRouter组件通过道具获得路由器，如Programmatically navigate using react router V4中所述。

Answer 2

我意识到自己在做错事情，并且能够解决我的问题。

关键是要从react-router-dom了解路由器模块带有三个道具：path，history和component。

因此，要重定向按钮上的页面，请单击我要做的所有事情，将我的所有Routes之间的标签之间嵌入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;

，并且在您要重新单击导入链接或导航链接的组件中，我更喜欢使用navlink 并使用它重定向到点击页面上

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

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

react-router-dom：更新URL，但不呈现新组件

3 个答案: