Проблема с React SPA Routing - PullRequest
Новая
       3

Проблема с React SPA Routing

0 голосов
/ 10 января 2020

У меня есть следующий индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Main from './main/main';
import './index.css';

ReactDOM.render(
  <BrowserRouter><Main /></BrowserRouter>,document.getElementById('root'));

следующее в основном. js: 

import React, { Component } from 'react';
import NavMenu from "./navmenu";
import Content from "./content";
import './main.css';

class Main extends Component {
  render() {
    return (
      <div id="main-layout">
        <div id="main-header">
          <div><img src={(require("./images/ppslogo-small.png"))} alt="eeeee"/></div>
          <div><h2>Lil Test By Me</h2></div>
        </div>
        <div id="main-content">
          <NavMenu />
          <Content />
        </div>
        <div id="main-footer">
          <div>Copyright &copy; 2020. Powered By me.  All Rights Reserved.</div>
        </div>
      </div>
    );
  }
}
export default Main;

И следующее по содержанию. js

import React, { Component } from 'react';
import {Route, Switch} from 'react-dom';

import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";

class Content extends Component {
  render() {
    return(
      <Switch>
        <Route exact path="/Dashboard" component={Dashboard} />
        <Route path="/Invoicing" component={Invoicing} />
      </Switch>
    )
  }
};
export default Content

Это моя попытка создать SPA с компонентом Content в качестве цели для всех моих последующих страниц; тем не менее, я явно делаю что-то не так, потому что я получаю всевозможные ошибки повсюду. Кто-нибудь может сразу увидеть, что я здесь делаю неправильно?

Ответы [ 2 ]

2 голосов
/ 10 января 2020

Route и Switch необходимо импортировать из react-router-dom вместо react-dom

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

import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";

class Content extends Component {
  render() {
    return(
      <Switch>
        <Route exact path="/Dashboard" component={Dashboard} />
        <Route path="/Invoicing" component={Invoicing} />
      </Switch>
    )
  }
};
export default Content
1 голос
/ 10 января 2020

Используйте react-router-dom вместо react-router и затем измените свой контент. js код на это. 

import React, { Component } from 'react';
import {Route, Switch,  BrowserRouter as Router} from 'react-router-dom';

import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";

class Content extends Component {
  render() {
    return(
      <Router>
          <Switch>
            <Route exact path="/dashboard" component={Dashboard} />
            <Route path="/invoicing" component={Invoicing} />
          </Switch>
      </Router>
    )
  }
};
export default Content

обратите внимание, что я добавил Router над коммутатором. и изменил реакцию-маршрутизатор на реагирующее-маршрутизатор-дом, а также преобразовал маршруты в нижний регистр

...