React-Router如何防止重定向

Posted 2023-02-21

【中文标题】React-Router如何防止重定向

【英文标题】：React-Router how to prevent from redirect

【发布时间】：2019-02-26 16:30:57

【问题描述】：

所以我的代码中有一个问题，当我刷新我的页面时，它会向我发送一个 NotFound 页面，但是当我不刷新页面时，在更改路线时仍然可以工作（单页应用程序）

我的路线代码：

import React,  Component  from 'react';
import  BrowserRouter, Route, Switch  from 'react-router-dom';

import Navigation from './src/containers/Navigation/Navigation';
import PageProjects from './src/containers/PageProjects/PageProjects';
import NewPost from './src/components/pages/Projects/NewPost/NewPost'

import Home from './src/components/pages/Home/Home';
import Calendar from './src/components/pages/Calendar/Calendar';
import Team from './src/components/pages/Team/Team';
import Settings from './src/components/pages/Settings/Settings';
import NotFound from './src/components/pages/NotFound/NotFound';



class App extends Component 


  render() 

return (

  <div className="App" style= height: '100%' >
    <BrowserRouter>
      <div>
        <Navigation />
        <Switch>
          <Route path="/profile" component=Home exact />
          <Route path="/projects" component=PageProjects exact />
          <Route path="/calendar" component=Calendar exact />
          <Route path="/team" component=Team exact />
          <Route path="/newpost" component=NewPost exact />
          <Route path="/settings" component=Settings exact />
          <Route path="*" component=NotFound exact />
        </Switch>
      </div>
    </BrowserRouter>
  </div>
    );
  


export default App;

只有我的“/profile”页面有效，因为它是我从路由服务器发送 index.html 文件的页面

app.get('/profile', function(req, res)
    res.sendFile(__basedir + "/react/index.html");
);    

我的导航组件：

import React,  Component  from 'react';
import BrowserRouter, Route, Switch from 'react-router-dom';
import Toolbar from '../../components/Toolbar/Toolbar';
import SideBar from '../../components/SideBar/SideBar';
import Backdrop from '../../components/Backdrop/Backdrop';

import Home from '../../components/pages/Home/Home';
import Calendar from '../../components/pages/Calendar/Calendar';
import Team from '../../components/pages/Team/Team';
import Settings from '../../components/pages/Settings/Settings';
import NotFound from '../../components/pages/NotFound/NotFound';


class Navigation extends Component 
      state = 
    sideBarOpen: false,
  

  barToggleClickHandler = () => 
this.setState((prevState) => 
  returnsideBarOpen: !prevState.sideBarOpen;
    );
  ;

  backdropClickHandler = () => 
    this.setState(sideBarOpen: false);
  ;

  render() 
let backdrop;

if(this.state.sideBarOpen)    
  backdrop = <Backdrop click=this.backdropClickHandler/>;


return (

    <section className="Navigation">
    <Toolbar barClickHandler=this.barToggleClickHandler />
    <SideBar show=this.state.sideBarOpen/>
    backdrop
    <main style=marginTop: '150px'>
    </main>
  </section> 

    );
  


export default Navigation;

我能做什么？ 谢谢 （我正在使用 Reactjs、Nodejs、Express..）

【问题讨论】：

重现的步骤是什么？

能否请您出示您的Navigation 组件？

@RaghavGarg 完成

【参考方案1】：

app.get('/', function(req, res)
    res.sendFile(__basedir + "/react/index.html");
);

或使用哈希路由器

<HashRouter>
    <div>
    <Navigation />
    <Switch>
      <Route path="/profile" component=Home exact />
      <Route path="/projects" component=PageProjects exact />
      <Route path="/calendar" component=Calendar exact />
      <Route path="/team" component=Team exact />
      <Route path="/newpost" component=NewPost exact />
      <Route path="/settings" component=Settings exact />
      <Route path="*" component=NotFound exact />
    </Switch>
  </div>
</HashRouter>

【讨论】：

只有一件事，路由现在显示了一个哈希，我该如何删除它？

这就是hashrouter的意思，如果你不想要hash你必须使用我在BrowserRouter发布的第一个选项

【参考方案2】：

这应该可以解决问题！

app.get('/', function(req, res)
    res.sendFile(__basedir + "/react/index.html");
);