React 路由不呈现我的组件并给出 404 错误

Question

我一直在练习如何使用最新的模块版本，所以我目前正在尝试使用 react-router-dom。它不会在确切路径上呈现页面组件，而是在主页上呈现。

我尝试使用其他版本的 react-router-dom，但仍然得到相同的结果。

//App.js file

import React from 'react';

import {BrowserRouter as Router, Route} from 'react-router-dom';

function App() {

    return (

        <Router>

            <div>

                <Route path="/shop" component={Shop}/> 

//doesn't render at localhost://8080/shop, but at localhost://8080, it renders the Shop page

                <Route path="/about" component={About}/>

            </div>

        </Router>

        )

}

export default App;

function Shop() {

        return (

            <div>

                <h3>

                    Shop

                </h3>

            </div>

        )

}

它应该呈现适当的组件，但会出现 404 错误..我还发现通常有一个自动完成选项（在我以前的版本上尝试 Route 时，它会在我的 IDE 中显示“组件、组件、路径..”，但在这里它没有显示任何内容。是否可能无法识别路线？

Answer 1

关于在任何地方都没有定义。我准确地运行了您的代码，但包含了“关于”页面的功能。路由器正在为我工作。主页什么也没显示，/shop 有商店的 h3 标签，/about 有关于 about 的 h3 标签。index.js 是否在调用应用程序？您对此进行了任何修改吗？

Answer 2

尝试向您的路线添加“精确”道具。<Route&nbsp;exact&nbsp;path="/shop"&nbsp;component={Shop}/>这是一个解释。