1

I am very new to react and and the router and bootstrap libraries I chose to use. They are basically just react-router-bootstrap. I am just getting a feel for things and I want to make a web app that has some basic url navigation. I have 4 parts, home browse add and about, clicking on the links works well, and so do the routes, but when navigate to the default route the handler works okay in that it shows the Home component, but does not make the home button active in the nav. I am a bit stuck and wondering if anyone can help me out? I would like to make that home part active at the '/ ' default route, and was thinking I could just redirect to '/home' and let the rest take care of it, however it doesn't look like I can add a path prop to DefaultRoute. So I was curious if anyone had any ides? Also curious if this looks like the right way to build something like I am building.

I made a gist that is HERE

Thanks to all ahead of time!!!

Henrik Andersson
  • 45,354
  • 16
  • 98
  • 92
poutyboi
  • 149
  • 5
  • 20
  • Where are all the Javascript source files? It would be helpful if this was something that was packaged up that can be installed and have the modules downloaded instead. Other than that, it looks fine. It would be helpful if I can just download and run the code to help figure out the problem. – Hatem Jaber Jul 11 '15 at 20:45
  • I just make a repo here https://github.com/jziesing/react-test – poutyboi Jul 11 '15 at 22:10

1 Answers1

3

The only change that I made was to your routes, they used to look like this:

var routes = (
<Route handler={App} >

    <DefaultRoute handler={Home}/>

    <Route name="home" handler={Home} path="/home">
    </Route>

    <Route name="browse" handler={Browse} path="/browse">
    </Route>

    <Route name="add" handler={Add} path="/add">
    </Route>

    <Route name="about" handler={About} path="/about">
    </Route>
</Route>

);

and I changed them to this:

var routes = (
<Route handler={App} >

    <DefaultRoute name="home" path="/" handler={Home}/>

    <Route handler={Home} path="/home">
    </Route>

    <Route name="browse" handler={Browse} path="/browse">
    </Route>

    <Route name="add" handler={Add} path="/add">
    </Route>

    <Route name="about" handler={About} path="/about">
    </Route>
</Route>

);

I tested it and it works as expected. When you visit the home page the url only has the /#/ and is not suffixed like /#/home, I don't think that is an issue.

Hatem Jaber
  • 2,341
  • 2
  • 22
  • 38
  • Okay thanks, sounds like its just a standard to make home under that route. It would be nice to be able to redirect traffic headed to /#/home to /#/ – poutyboi Jul 14 '15 at 14:01