[英]React js not navigating to pages using react router
如果我在我的 http://localhost:3000/anything 中输入任何内容,它将与我输入 home 或 / 或 login 一样,什么都没有。 该页面将是空白的。
我的social.js:
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from '../../containers/Pages/Home/Home';
import Login from '../../containers/Pages/Login/Login';
class Social extends Component {
render () {
return (
<div>
<Switch>
<Route path="/home" exact component={Home} />
<Route path="/login" exact component={Login} />
</Switch>
</div>
);
}
}
export default Social;
应用程序.js:
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
import Layout from './Layout/Layout'
import Social from './containers/Pages/Social';
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Layout>
<Social />
</Layout>
</div>
</BrowserRouter>
);
}
}
export default App;
有什么想法有什么问题吗? 谢谢。
----- 编辑,我注意到当我从 app.js 中删除<Layout>... </Layout>
时它可以工作。
我的 Layout.js:
import React, { Component } from 'react';
import Toolbar from '../components/Navigation/Toolbar/Toolbar';
class Layout extends Component {
render() {
return (
<>
<Toolbar />
</>
);
}
}
export default Layout;
和工具栏:
import React, { Component } from 'react';
import classes from './Toolbar.module.css';
class toolbar extends Component {
render() {
return(
<>
<header className={classes.Toolbar}>
toolbar
</header>
</>
);
}
}
export default toolbar;
我认为您缺少Toolbar组件周围的包装元素
import React, { Component } from 'react';
import Toolbar from '../components/Navigation/Toolbar/Toolbar';
class Layout extends Component {
render() {
return (
<div>
<Toolbar />
<div>
);
}
}
export default Layout;
与工具栏相同。 应该如下:
import React, { Component } from 'react';
import classes from './Toolbar.module.css';
class Toolbar extends Component {
render() {
return(
<div>
<header className={classes.Toolbar}>
toolbar
</header>
</div>
);
}
}
export default Toolbar;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.