如何根据react-router-dom点击的link改变一个组件
How to change a component on the basis of the link clicked by react-router-dom
请查看这段代码并告诉我是否可以帮助我解决问题,
import React from 'react';
import {Switch, Route, BrowserRouter as Router, Link} from "react-router-dom";
function App(){
return(
<Router>
<div className = "sidebar">
<Link to = "/"><h1 className = "heading ">TODOS</h1></Link>
<Link to= "/login"> <span className = "links login">LogIn</span></Link>
<Link to = "/signup"><span className = "links signup">SignUp</span></Link>
<Link to = "contact"><span className = "links contact">Contact Us</span></Link>
<Link to = "/about"><span className = "links about">About Developer</span></Link>
</div>
<Switch>
<Route path = "/">
<h1>home route</h1>
</Route>
<Route path = "/login">
{/* <Login/> */}
<div>
<h1>this is login route</h1>
</div>
</Route>
<Route path = "/signup">
<h1>signup page</h1>
</Route>
<Route path = "/contact">
<h1>contact page</h1>
</Route>
<Route path = "/about">
<h1>About page</h1>
</Route>
</Switch>
</Router>
)
}
export default App;
NMw 不管你点击哪个 links 它都显示相同的文本我该如何解决这个问题??
为了测试和更好地理解问题,你们可以继续 this link 并复制粘贴我的代码并在那里运行,请让我知道我的错误
只需将 exact 属性添加到 all 路由组件。它会起作用
<Route exact path='/yourpath' />
请查看这段代码并告诉我是否可以帮助我解决问题,
import React from 'react';
import {Switch, Route, BrowserRouter as Router, Link} from "react-router-dom";
function App(){
return(
<Router>
<div className = "sidebar">
<Link to = "/"><h1 className = "heading ">TODOS</h1></Link>
<Link to= "/login"> <span className = "links login">LogIn</span></Link>
<Link to = "/signup"><span className = "links signup">SignUp</span></Link>
<Link to = "contact"><span className = "links contact">Contact Us</span></Link>
<Link to = "/about"><span className = "links about">About Developer</span></Link>
</div>
<Switch>
<Route path = "/">
<h1>home route</h1>
</Route>
<Route path = "/login">
{/* <Login/> */}
<div>
<h1>this is login route</h1>
</div>
</Route>
<Route path = "/signup">
<h1>signup page</h1>
</Route>
<Route path = "/contact">
<h1>contact page</h1>
</Route>
<Route path = "/about">
<h1>About page</h1>
</Route>
</Switch>
</Router>
)
}
export default App;
NMw 不管你点击哪个 links 它都显示相同的文本我该如何解决这个问题?? 为了测试和更好地理解问题,你们可以继续 this link 并复制粘贴我的代码并在那里运行,请让我知道我的错误
只需将 exact 属性添加到 all 路由组件。它会起作用
<Route exact path='/yourpath' />