反应路由器子路由导航栏不起作用

Question

我正在尝试使用React.js和bootstrap创建一个导航栏，我有几个组件并且不知道如何使菜单中的链接正常工作，问题出在我想访问路径，例如path ='/ book / booktwo'只是行不通，但更简单的个人路线行得通。 这是我的代码。 谢谢 ！！！

    import React, { Component } from 'react';
import {IndexRoute, Route, browserHistory} from 'react-router';
import {Router} from 'react-router';
import Home from './components/Home';
import Books from './components/Books';
import Bookstopic from './components/Bookstopic';
import Booktwo from './components/Booktwo';
import Bookthree from './components/Bookthree';
import Navbars from './components/Navbars';

export default class Routes extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route exact path={'/'} component={Navbars} >
          <IndexRoute component={Home} />
            <Route path='{/books}' component={Books} >
              <IndexRoute component={Books} />
                  <Route path='{/book/:id}' component={Bookstopic} />
                  <Route path='{/book/booktwo}' component={Booktwo} />
                  <Route path='{/book/bookthree}' component={Bookthree} />
              </Route>           
        </Route>
      </Router>
    );
  }
}

import React, { Component, PropTypes } from 'react';

export default class Home extends Component {
  render() {
    return (
      <div>
        <h1>Hi Home !!! </h1>
      </div>
    );
  }
}

import React, { Component, PropTypes } from 'react';

export default class Booktwo extends Component {
  render() {
    return (
      <div>
        <h1>Hi Booktwo !!! </h1>
      </div>
    );
  }
}


import React, { Component, PropTypes } from 'react';
import Booktwo from './components/Booktwo';

export default class Bookstopic extends Component {
  constructor(props) {
    super(props);
  }
  //const bookid = this.props.params.bookid;
  render() {
    return <Booktwo />
  }
}


class Nav extends React.Component {
   render() {
    return (
     <div>  
      <ul id="navi">
        <li><a href="https://www.mybooks.com/">Home</a></li>
        <li><Link to={"/books"} activeStyle={{color: "red"}} activeClassName="hsubs" >Books</Link>
          <ul className="subs">
            <li><Link to={"/book/${booktwo}"} activeStyle={{color: "red"}}>Book Two</Link></li>
            <li><Link to={"/bookthree"} activeStyle={{color: "red"}}>Book Three</Link></li>
            </ul>
        </li>        
      </ul>
     </div> 
    );
  }
}



export default class Navbars extends React.Component {
  render() {
    return (
      <div className="contents">
        <Nav />
        <div className="row">
          <div className="col-xs-10 col-xs-offset-1">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-10 col-xs-offset-1">
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

使用path={'/book/:id'}代替path='{/book/:id}'

Answer 2

我认为有两个问题：

1. 您的引号不在花括号内。 尝试将其写为path={'/books'}等。

2. 您对浏览器所指向的路线的了解不够明确。 您的三个子路由在第一个字符上都匹配，这可能会使它误以为它正在路由到'/' 。 我通常使用exact path={/*string*/}来确保路由器不会混淆。 （尽管我不确定这是否会引起任何问题，因为到目前为止还不适合我）