[英]Set up router with history in reactjs
我有 3 个组件,我想制作 2 个按钮 HOME 和 ABOUT(单击后将重定向到页面对应的 HOME(路径'/')或 ABOUT(路径'/about')。组件 NOTFOUND 仅在路径错误时显示。但是当我尝试单击 HOME 或关于它始终显示 NOTFOUND 尽管 url 已更改为“/”或“/about”。详细代码如下,我必须做些什么才能使其正常工作。TKS all
import React, { useState } from 'react';
import {Router, Route, Switch} from 'react-router-dom'
import {createBrowserHistory} from 'history'
const history = createBrowserHistory()
function Home(props) {
return (
<div>Home</div>
)
}
function AboutUs(props) {
return (
<div>About US</div>
);
}
function NotFound(props) {
return (
<div>NotFound</div>
);
}
function RouterDom(props) {
const [count, setCount] = useState(1)
return (
<div>
<div>
<button onClick={() => history.push('/')}>Home</button>
<button onClick={() => history.push('/about')}>About</button>
</div>
<div>
<div>Count: {count}</div>
<button onClick={() => setCount(count + 1)}>Add</button>
</div>
<Router history={history}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={AboutUs} />
<Route component={NotFound}/>
</Switch>
</Router>
</div>
);
}
export default RouterDom;
您应该使用反应路由器 dom 提供的链接而不是按钮。
import {Link} from "react-router-dom";
<Link to="/">Home</Link>
<Link to="/about">About</Link>
您还应该将 path 属性添加到 Route 标记:
<Route path="/about">
<About />
</Route>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.