React Router не отображает правильный компонент - PullRequest
Новая
       8

React Router не отображает правильный компонент

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

Я новичок в React и пытаюсь понять маршрутизацию. Я создал учебный проект и хочу представить три разных компонента, каждый из которых имеет свой путь. Однако все пути приводят к отображению компонента App.

Я пытался найти решения по нескольким источникам, но не смог выяснить проблему! Пожалуйста, посмотрите. Заранее спасибо.

Project Structure

Root .jsx 

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

import ScreensList from './List';
import ScreensWeather from './Weather';
import App from '../App';

const ScreensRoot = () => (
  <Router>
    <Switch>
        <Route exact path='/' component={App}/>
        <Route path="/list" component={ScreensList} />
        <Route path="/weather" component={ScreensWeather} />
    </Switch>
  </Router>
);

export default ScreensRoot;

Приложение. js

import React, {Component} from 'react';
import './App.css';

class App extends React.Component {
   render(){
      return (
         <div>
            Hello from App!
         </div>
      )
   }
}   

export default App;

List.jsx 

import React from 'react';
import List from '../components/List';

const ScreensList = () => (
    <div>
        <List/>
    </div>
);

export default ScreensList;

List.jsx 

import React from 'react';

const List = (
    <div>Hello from List Component!</div>
);

export default List;

index. js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './screens/Root';

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

serviceWorker.unregister();

Ответы [ 2 ]

3 голосов
/ 27 января 2020

1.Введено из 

import { Router } from 'react-router';

используется 

import { BrowserRouter as Router } from "react-router-dom";


2.change 

const List =  (
  <div>Hello from List Component!</div>
);

на 

const List = () => (
  <div>Hello from List Component!</div>
);


3. Как уже упоминалось, другие 

ReactDOM.render(<ScreensRoot />, rootElement);


Временные коды и коробки

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

Насколько я вижу, вы определили компонент ScreensRoot, но нигде не используете. Если вы хотите, чтобы это был фактический root вашего проекта, то в вашем index.js вы должны использовать его вместо App: 

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

(обратите внимание, что вам нужно импортировать ScreensRoot в вашем index.js, чтобы это работало).

...