[英]react-router-dom : updates url but does not render the new component
I am a bit lost with this issue for a whole day.我一整天都在这个问题上迷失了方向。 On button click the url changes but does not render the new page and I don't understand why.
在按钮上单击 url 更改但不呈现新页面,我不明白为什么。
I am using react-dom-router 5.2.0我正在使用 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>
);
}
}
Please Note: I added <Control/>
directly in the render method above and it renders the component all well.请注意:我在上面的渲染方法中直接添加了
<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();
I appreciate all the help.我感谢所有的帮助。 Thank you
谢谢
I think the problem is that react-router-dom is not aware of this history.push('/control')
you're doing;我认为问题在于 react-router-dom 不知道你正在做的这个
history.push('/control')
; ie if you want to redirect to another route, it should be through react-router, not outside of it.即如果你想重定向到另一条路线,它应该通过react-router,而不是在它之外。
You have a few options:你有几个选择:
Use the useHistory
hook:https://reacttraining.com/react-router/web/api/Hooks/usehistory使用
useHistory
钩子:https://reacttraining.com/react-router/web/api/Hooks/usehistory
Your button could be wrapped in a Link component: https://reacttraining.com/react-router/web/api/Link您的按钮可以包含在 Link 组件中: https://reacttraining.com/react-router/web/api/Link
Get the router through props with the withRouter
component, as explained in: Programmatically navigate using react router V4 .使用
withRouter
组件通过 props 获取路由器,如: Programmatically navigate using react router V4中所述。
I have realized what I was doing wrong and was able to solve my issue.我已经意识到我做错了什么并且能够解决我的问题。
The key was to understand that the Router module from react-router-dom comes with three props: path, history, and component.关键是要了解 react-router-dom 的 Router 模块带有三个 props:路径、历史记录和组件。
So in order to redirect a page on button click all I had to do embed all my Routes between tag in the App.js因此,为了在按钮上重定向页面,单击所有我必须在 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;
And then you can use button onClick to redirect然后你可以使用按钮 onClick 来重定向
COMPONENTA JS
<button variant="secondary"
className="button" size="lg"
onClick={() => this.props.history.push('/test2')}>
RedirectTo
</button>
Hope this will be helpful to others who come across this!希望这对遇到此问题的其他人有所帮助!
In server.js file instead of button use navlink or link from reactrouter below is a saple code在 server.js 文件而不是按钮中,使用 navlink 或来自 reactrouter 的链接下面是一个简单的代码
<NavLink to="/control">control</NavLink>
Import every component to routing component then use router switch and redirect statements like below将每个组件导入路由组件,然后使用路由器开关和重定向语句,如下所示
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;
and in your component where you re clicking import link or nav link i prefer using navlink and use it to redirect to page on click在您单击导入链接或导航链接的组件中,我更喜欢使用导航链接并使用它在单击时重定向到页面
import { NavLink } from 'react-router-dom'
<NavLink to="/home">home</NavLink>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.