Question

所以我的代码中存在一个问题，当我刷新页面时，它会向我发送一个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) => {
  return{sideBarOpen: !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 ..）

Answer 1

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

或使用hashrouter

<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>

Answer 2

这应该可以解决问题！

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

React-Router如何防止重定向

2 个答案: