新页面与主页反应相同

Question

知道为什么当我尝试放置新页面时"Signin"；在反应中，我得到"；主页"；页SignInPage中唯一的内容是h1〃；登录"；为什么我在导入主页之前得到它？

import React from 'react';
const SigninPage = () => {
return (
<div>
<h1>Sign in</h1>
</div>
);
};
export default SigninPage;
import React from 'react'
import './App.css';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Home from './pages';
import SigninPage from './pages/signin';
function App() {
return (
<Router >
<Switch>
<Route path="/" component={Home} exact />
<Route path="/signin" component={SigninPage} exact />
</Switch>
<Home />

</Router>
);
}
export default App;

Answer 1

此外，您的组件Home是在没有路由的情况下编写的，因此它总是呈现

<Home />

Answer 2

<Route/>组件的顺序很重要。基本上，它会尝试从第一名到最后一名进行匹配。既然/匹配一切，那就永远赢。所以那个应该是最后一个。永远记得从最具体的到最不具体的顺序：

<Switch>
<Route path="/signin" component={SigninPage} exact />
<Route path="/" component={Home} exact />
</Switch>