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中显示“ component，components，path ..”。以前的版本，但这里什么也没显示。是否可能无法识别路线？

Answer 1

尝试向路线添加“精确”道具。

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

Here是一种解释。

Answer 2

关于在任何地方都没有定义。我准确地运行了您的代码，但是为About页面提供了一个函数。路由器正在为我工作。主页什么也没有显示，/ shop的商店标记为h3，/ about的标记为大约h3。

index.js是否正在调用应用程序？您对此有任何修改吗？

React route无法呈现我的组件并给出404错误

2 个答案: