javascript - 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 错误..我还发现通常有一个自动完成选项（它在我的 IDE 上显示'组件，组件，路径..'在我以前的版本上尝试路由时，但在这里它没有显示任何东西。是否有可能无法识别路线？

标签： javascriptreactjs

Answer 1

尝试为您的路线添加“精确”道具。

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

这是一个解释。