我如何确保我的用户通过React Router Dom进入特定路径(写在url中)，而不自动进入默认主页

Question

我目前遇到一个问题，如果用户键入localhost:3000/resume，它将默认返回到localhost:3000。当我点击我写的专门导航到简历页面的按钮时，效果很好，但我希望这样，如果他们在URL中键入特定路径，他们就可以访问该页面，而不必从登录页开始并导航到那里。这是我的代码，包含路由器

App.js

import React from 'react';
import './App.css';
import LandingPage from './pages/LandingPage/LandingPage';
import {Route,Router, Redirect} from 'react-router-dom';
import history from './history';
import Projects from './pages/Projects/Projects';
import Experiences from './pages/Experiences/Experiences';
import Resume from './pages/Resume/Resume'
function App() {
return (
<div className="App">
<Router history = {history}>
<Route path = "/" component = {LandingPage} exact/>
<Route path = "/projects" component = {Projects} exact/>
<Route path = "/experiences" component = {Experiences} exact/>
<Route path = "/resume" component = {Resume} exact/>
<Redirect to = "/"/>
</Router>
</div>
);
}
export default App;

history.js

import  {createBrowserHistory} from "history";
export default createBrowserHistory()

Answer 1

感谢@Shawn_Yap，这是新的App.js代码，以防其他人创建了与我相同的错误。

你需要一个开关，否则它似乎会渲染所有路线，然后重定向回登录页。这是文档以供进一步参考。交换机文档React Router Dom

App.js

import React from 'react';
import './App.css';
import LandingPage from './pages/LandingPage/LandingPage';
import {Route,Router, Switch,Redirect} from 'react-router-dom';
import history from './history';
import Projects from './pages/Projects/Projects';
import Experiences from './pages/Experiences/Experiences';
import Resume from './pages/Resume/Resume'
function App() {
return (
<div className="App">
<Router history = {history}>
<Switch>
<Route path = "/projects" component = {Projects} exact/>
<Route path = "/experiences" component = {Experiences} exact/>
<Route path = "/resume" component = {Resume} exact/>
<Route path = "/" component = {LandingPage} exact/>
<Redirect from="*" to = "/"/>
</Switch>
</Router>
</div>
);
}
export default App;