javascript - React Router 默认路由重定向到/home

标签 javascript reactjs react-router react-bootstrap

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

我提出了一个要点 HERE

提前感谢大家!!!

最佳答案

我所做的唯一更改是您的路线,它们以前看起来像这样:

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>

);

我对其进行了测试,它按预期工作。当您访问主页时,url 只有 /#/ 并且没有像 /#/home 这样的后缀,我认为这不是问题。

关于javascript - React Router 默认路由重定向到/home,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31360960/

相关文章:

reactjs - 如何仅在react-router-dom中通过slug路由访问不同的组件?

reactjs - 后退按钮后 react 路由器 `history` 和 `location` 不匹配

javascript - React ES6 组件不会重新渲染

javascript - v4 中的 d3 缩放功能问题

javascript - Datatables Responsive in a flexbox hierarchy overflow in 最近的浏览器

javascript - jquery 选择器不适用于添加的标签

javascript - 创建逗号分隔对象列表的最短方法

android - React Native - Android TV - DPad 功能

json - 使用 webpack 为 react-lottie 从主包中排除 JSON 文件

javascript - 按键将对象分组为二维数组