我是 React 的初学者,正在尝试了解路由。我创建了一个学习项目,想要渲染三个不同的组件,每个组件都有不同的路径。然而,所有路径都会导致App组件的显示。
我尝试从多个来源寻找解决方案,但无法找出问题所在!请看一看。提前致谢。
根.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;
App.js
import React, {Component} from 'react';
import './App.css';
class App extends React.Component {
render(){
return (
<div>
Hello from App!
</div>
)
}
}
export default App;
列表.jsx
import React from 'react';
import List from '../components/List';
const ScreensList = () => (
<div>
<List/>
</div>
);
export default ScreensList;
列表.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();
最佳答案
1.已安装
import { Router } from 'react-router';
使用
import { BrowserRouter as Router } from "react-router-dom";
2.改变
const List = (
<div>Hello from List Component!</div>
);
至
const List = () => (
<div>Hello from List Component!</div>
);
3.正如其他人提到的
ReactDOM.render(<ScreensRoot />, rootElement);
关于reactjs - React Router 未渲染正确的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59924497/