时间戳

首页 > 解决方案 > 如何确保我的用户通过 React-Router-Dom 转到特定路径（写在 url 中）而不自动转到默认主页？

reactjs - 如何确保我的用户通过 React-Router-Dom 转到特定路径（写在 url 中）而不自动转到默认主页？

问题描述

我目前遇到一个问题，如果用户输入localhost:3000/resume，它将默认返回localhost:3000. 当我单击我写的专门导航到简历页面的按钮时，它工作得很好，但我想要它，以便如果他们在 URL 中输入该特定路径，他们应该能够访问该页面而不必从登陆开始页面并导航到那里。这是我的包含路由器的代码

应用程序.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;

历史.js

import  {createBrowserHistory} from "history";

export default createBrowserHistory()

标签： reactjsreact-routerreact-router-dom

解决方案

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

您需要一个开关，否则它似乎会呈现所有路线，然后重定向回登录页面。这是供进一步参考的文档。Switch 文档 React Router Dom

应用程序.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;

推荐阅读