反应路由器默认路由重定向到/home [英] React Router Default Route Redirect to /home

问题描述

我对反应以及我选择使用的路由器和引导程序库非常陌生.它们基本上只是 react-router-bootstrap.我只是对事物有所了解，我想制作一个具有一些基本 url 导航的网络应用程序.我有 4 个部分，主页浏览添加和关于，单击链接效果很好，路线也是如此，但是当导航到默认路线时，处理程序可以正常工作，因为它显示了主页组件，但没有制作主页按钮活跃在导航中.我有点卡住了，想知道是否有人可以帮助我?我想让那个 home 部分在 '/' 默认路由上处于活动状态，并认为我可以重定向到 '/home' 并让其余部分处理它，但是它看起来我不能添加路径支持 DefaultRoute.所以我很好奇是否有人有任何想法?也很好奇这看起来像我正在构建的东西的正确方法.

我制作了一个要点 HERE

提前谢谢大家！！！

解决方案

我所做的唯一改变是你的路线，它们以前看起来像这样:

var routes = (<路由处理程序={App} ><DefaultRoute handler={Home}/><Route name="home" handler={Home} path="/home"></路线><Route name="browse" handler={Browse} path="/browse"></路线><Route name="add" handler={Add} path="/add"></路线><Route name="about" handler={About} path="/about"></路线></路线>

);

我把它们改成了这样:

var routes = (<路由处理程序={App} ><DefaultRoute name="home" path="/" handler={Home}/><Route handler={Home} path="/home"></路线><Route name="browse" handler={Browse} path="/browse"></路线><Route name="add" handler={Add} path="/add"></路线><Route name="about" handler={About} path="/about"></路线></路线>

);

我测试了它，它按预期工作.当您访问主页时，网址只有 /#/ 并且没有像 /#/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!!!

解决方案

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.

这篇关于反应路由器默认路由重定向到/home的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！