reactjs - 为什么当我路由另一个页面时无法更改导航栏上的按钮文本 React

Question

我正在尝试通过页面自定义按钮。我的意思是当我更改页面时，我想在更改路线时更改导航栏按钮的名称。但是当我更改位置时，它没有显示正确的按钮而没有刷新页面。我怎么能修好。

Navbar.js

function StyledNavbar() {
    const checkPath = (pathname) => {

        if (pathname === '/details') {
            return (<div>
               <Link to='/' style={{marginRight:'10px'}}><button>Home</button></Link>
               <Link to='/favorites'><button>Favorites</button></Link>
            </div>)
       }
        else if (pathname === '/favorites') {
            return (<Link to='/'><button>Home</button></Link>)

       }
        else if (pathname === '/') {
            return (<Link to='/favorites'><button>Favorites</button></Link>)
       }
   }
   useEffect(checkPath,[window.location.pathname])...}

App.js

function App() {
    return(
        <Router>
            
    <Navbar/>
        <Switch>
                    <Route exact path='/'>
                                     <Home/>
                    </Route>
                    <Route path='/favorites'>
                        <Favorites/>
                    </Route>
                {/* <Route path='/details/:id'> */}
                <Route path='/details'>
                        <Details/>
                    </Route>
     </Switch>
        </Router>
    )...}

标签： reactjsreact-routerreact-router-domrouter

Answer 1

如果我确实喜欢它的解决方案，但我需要在每个 Route Tag 中使用 Navbar