浏览器显示所有路由的相同组件答案

【问题标题】：Browser showing same component for all routes浏览器显示所有路由的相同组件
【发布时间】：2018-05-29 17:24:09
【问题描述】：

我正在使用 react 重新创建一个简单的路由示例。目前，即使我在 'localhost:3000/#/' 之后键入任何其他内容，目前也只显示 App 组件，我想在调用 'localhost:3000/#/' 时显示 App 组件以及通配符的 Whoops404 组件。但是，如果我交换路由线并首先编写 Whoops404 组件，那么每个 URI 都会显示 Whoops404 组件。首先编写的任何路由都会开始在浏览器中显示每个 URI。请让我知道我错过了什么？我的 index.js 代码如下

import React from 'react'
import {render} from 'react-dom'
import {App} from './components/App'
import {Whoops404} from './components/Whoops404'
import {BrowserRouter, Switch, Route} from 'react-router-dom'

window.React = React
render(
<BrowserRouter>
    <div>
        <Switch>
            <Route path = '/' component = {App}/>
            <Route path = '*' component = {Whoops404}/>
        </Switch>
    </div>
</BrowserRouter>,  
document.getElementById('react-container'));

【问题讨论】：

您是否尝试将exact={true} 添加到您的App 路由中？

标签： reactjs react-router

【解决方案1】：

您需要在路线中添加“精确”关键字

` <Switch>
        <Route exact path = '/' component = {App}/>
        <Route exact path = '*' component = {Whoops404}/>
    </Switch>`

【讨论】：