react-router默认路由重定向到 /home

IT技术 javascript reactjs react-router react-bootstrap
2021-05-21 02:18:09

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

我做了一个要点在这里

提前感谢大家!!!

1个回答

我所做的唯一更改是对您的路线进行了更改,它们过去看起来像这样:

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>

);

我把它们改成了这样:

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>

);

我测试了它,它按预期工作。当您访问主页时,网址只有/#/并且没有后缀/#/home,我认为这不是问题。