node.js - React-Router如何防止重定向

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