Question

我有一个导航，当路径匹配时，每个项目的类都变为活动状态的离）
当路径为http://localhost/food时 <li class="active">food</li>

使用ES6语法实现这一目标的最佳方法是什么，React，   反应路由器？
  我不想仅仅因为使用Flux或Redux   这...如果我需要，那么我想知道如何使用Redux   （因为助焊剂更复杂并且有一些问题）

app.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link } from 'react-router';

import Home from './components/Home';
import Projects from './components/Projects';
import Blog from './components/Blog';
import createBrowserHistory from 'history/lib/createBrowserHistory';

class App extends React.Component {
  render() {
    return (
      <div>
        <div className="header">
          <nav className="navbar">
            <div className="navbar-header">
              <ul className="right">
                <li>
                  <a href="projects">PROJECTS</a>
                </li>
                <li>
                  <a href="blog">BLOG</a>
                </li>
                <li>
                  <a href="/">YOOCHAN</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
        <div className="container">{this.props.children}</div>
      </div>
    );
  }
}

let documentReady = () => {
  ReactDOM.render(
    <Router history={createBrowserHistory()}>
      <Route component={App}>
        <Route path="/" component={Home} />
        <Route path="projects" component={Projects} />
        <Route path="Blog" component={Blog} />
      </Route>
    </Router>, document.getElementById('app')
  );
};

$(documentReady);

的package.json

  "devDependencies": {
    "babel-core": "^6.3.21",
    "babel-eslint": "^5.0.0-beta6",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "eslint": "^1.10.3",
    "eslint-config-airbnb": "^2.1.1",
    "eslint-loader": "^1.1.1",
    "eslint-plugin-react": "^3.12.0",
    "history": "^1.17.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.3",
    "webpack": "^1.12.9"
  }

Answer 1

使用Link

的react-router帮助器

<Link className="class" activeClassName="active" to="/path">Path</Link>

链接到文档https://github.com/rackt/react-router/blob/latest/docs/API.md#link

Reactjs动态类名与反应路由器

1 个答案: