React Router v4 渲染多个路由 [英] React Router v4 renders multiple routes

问题描述

我正在创建一个 SPA，并尝试使用 react-router-dom 包版本 4.1.1 在应用程序中设置路由.

我的路线定义如下:

<BrowserRouter>
<路由确切路径="/" 组件={登录}/><Route path="/login" 组件={Login}/><Route path="404" 组件={NotFound}/><Route path="*" 组件={NotFound}/></div></浏览器路由器>

基本上，我想设置路由，以便对未定义路由的页面的任何请求都转到 {NotFound} 组件.

如何做到这一点?上述解决方案在请求 /login 页面时同时呈现 Login 和 NotFound 组件.

亲切的问候

解决方案

这是一个来自 官方教程，如何避免渲染多条路线

import { Switch, Route } from 'react-router'<开关><路线确切路径="/";组件={首页}/><路线路径="/about"组件={关于}/><路由路径=/:用户"组件={用户}/><路由组件={NoMatch}/></开关>

I'm creating an SPA and I'm trying to setup Routing in the application using the react-router-dom package version 4.1.1.

My Route Definition is below:

<BrowserRouter>
  <div>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </div>
</BrowserRouter>

Basically, I want to setup routing so that any request to a page for which no route is defined goes to the {NotFound} component.

How can this be achieved? The solution above renders both the Login and the NotFound component when requesting the /login page.

Kind regards

解决方案

here's an example from official tutorial, how to avoid rendering multiple routes

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

这篇关于React Router v4 渲染多个路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！