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>
)

我无法在<navlink>上正确设置activeStyle

1 个答案: