REACT.JS的路径没有渲染

Question

import {BrowserRouter , Route} from 'react-router-dom';
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
return (
<BrowserRouter>
<div className="grid-container">
<header className="row">
<div>
<a className="brand" href="index.html">SanaMall.</a>
</div>
<div>
<a className="link" href="/cart"> Cart</a>
<a className="link" href="/signin"> Sign In</a>
</div>
</header>
<main>
<Route  path= "/" component={HomeScreen}/>
<Route path="/product/:id" component={ProductScreen}/>
</main>
<footer className="row center">
All rights reserved.
</footer>
</div>
</BrowserRouter>
);
}
export default App;

所以我的问题是，当我把确切的路径上的组件主屏幕，它不呈现任何东西，然后ProductScreen只出现在浏览器上。然后，如果主屏幕显示在浏览器中，每当我点击一个产品，它只刷新主屏幕，而不显示ProductScreen。

希望你们能帮助我。这个问题已经困扰我将近3天了。

Answer 1

如果这段代码不能工作请告诉我

import {BrowserRouter ,Switch, Route} from 'react-router-dom';
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
return (
<BrowserRouter>
<div className="grid-container">
<header className="row">
<div>
<a className="brand" href="index.html">SanaMall.</a>
</div>
<div>
<a className="link" href="/cart"> Cart</a>
<a className="link" href="/signin"> Sign In</a>
</div>
</header>
<Switch>    
<Route exact path="/" >
<HomeScreen />
</Route>
<Route path="/product/:id">
<ProductScreen />
</Route>
</Switch>

<footer className="row center">
All rights reserved.
</footer>
</div>
</BrowserRouter>
);
}
export default App;

Answer 2

使用Switch独占呈现每条路由https://reactrouter.com/core/api/Switch