javascript - 如何根据 react-router-dom 单击的链接更改组件

Question

请查看此代码并告诉我您是否可以帮助我解决此问题，

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 无论您单击哪个链接，它都会显示相同的文本我该如何解决这个问题？为了测试和更好地理解问题，你们可以点击这里的链接并复制粘贴我的代码，它会在那里运行，请让我知道我的错误

标签： javascriptreactjsreact-routerreact-router-domweb-development-server

Answer 1

只需将确切的道具添加到所有路由组件。它会工作

<Route exact path='/yourpath' />