React-Router как предотвратить перенаправление - PullRequest
Новая
       10

React-Router как предотвратить перенаправление

0 голосов
/ 22 сентября 2018

Таким образом, у меня есть проблема в моем коде, когда я обновляю свою страницу, она отправляет мне страницу 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 ..)

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

Это должно сработать! 

app.get('/', function(req, res){
    res.sendFile(__basedir + "/react/index.html");
});
0 голосов
/ 22 сентября 2018 
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>
...