我無法正確設置activeStyle <NavLink>

Question

我無法正確設置NavLink使用activeStyle當我的網址是map。

基本上當我點擊NavLink我可以導航到正確的路線，但只有<NavLink to='/'被標記爲活動。

你能告訴我我在做什麼錯嗎？

const NavigationList = ({ navigations, onNavigationClick }) => (
    <div> 
    <NavLink to='/' activeStyle={{ 
     fontWeight: 'bold', 
     color: 'red' 
    }}> 
    Home 
    </NavLink > 
    <br /> 
    <NavLink to='map' activeStyle={{ 
     fontWeight: 'bold', 
     color: 'red' 
    }}> 
     Map 
    </NavLink > 
    </div> 
) 

在我的路由器配置，我有：

import React from 'react' 
import { Provider } from 'react-redux' 
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 
import Forecast from './Forecast' 
import Map from './Map' 

const Root = ({ store }) => (
    <Provider store={store}> 
    <Router> 
     <Switch> 
     <Route exact path='/' component={Forecast} /> 
     <Route exact path='/map' component={Map} /> 
     </Switch> 
    </Router> 
    </Provider> 
) 
export default Root 

Answer 1

我覺得這是NavLink.to和你Route.path之間的不匹配。

嘗試以下操作：

const NavigationList = ({ navigations, onNavigationClick }) => (
    <div> 
    <NavLink to='/' activeStyle={{ 
     fontWeight: 'bold', 
     color: 'red' 
    }}> 
    Home 
    </NavLink > 
    <br /> 
    <NavLink to='/map' activeStyle={{ 
     fontWeight: 'bold', 
     color: 'red' 
    }}> 
     Map 
    </NavLink > 
    </div> 
)