React Router Default Route Redirect to /home

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/31360960/react-router-default-route-redirect-to-home

标签

javascript

reactjs

react-router

react-bootstrap