React router sub routes navigation bar not working

Question

I am trying to create a navigation bar with React.js and bootstrap, i have several Components and dont know how to make the links in the menu work, the problem is with subroutes, when i want to access a path like path='/book/booktwo' it just dont work, but simpler individual routes do work. Here is my code. Thank you !!!

    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

I think there are two problems:

1. Your quotation marks are outside of the curly braces. Try writing it as path={'/books'} , etc.

2. You're not being specific enough with the route you're pointing the browser to. Your three subroutes are all matching on the first character, which might confuse it to think it is routing to '/' . I usually use exact path={/*string*/} to ensure the router doesn't get confused. (though I'm not sure if that causes any problems as it hasn't for me as of yet)