[英]Why can't I access other pages of my react app
So I have been messing around with ReactJS and I got stuck with not being able to access my other pages. 所以我一直在搞弄ReactJS,无法进入其他页面而陷入困境。 I am not sure what is the problem with the code below.
我不确定下面的代码是什么问题。
I am trying to make a multi page app with React, so I would like to have some of my pages to have different headers, like have some extra buttons or links. 我正在尝试使用React制作一个多页面应用程序,所以我想让我的某些页面具有不同的标题,例如具有一些额外的按钮或链接。
index.js index.js
import React from 'react';
import createHistory from 'history/createBrowserHistory';
import ReactDOM from 'react-dom';
import { Route, Switch, Router } from 'react-router-dom';
import {Provider} from "react-redux";
import Home from "./_components/home/home"
import Header from "./_components/header/header";
//import './scss/style.scss'; // importing SASS
ReactDOM.render(
<Router history={createHistory()}>
<div>
<Route exact path="/" component={Header}/>
</div>
</Router>,
document.getElementById('root'),
);
header.js header.js
import React, {Component} from 'react';
import {Link,Route,withRouter} from 'react-router-dom';
import Home from '../home/home';
import SignIn from '../signin/signin';
import CreateProjects from '../create_projects/create_projects';
import PostHeader from '../header/post_header';
import PreHome from '../home/pre_home';
class Header extends Component{
render(){
return(
<div className="container">
<div>
<h3>The Web App</h3>
<nav>
<ul>
<li><Link to="/signin-signup">Sign in?</Link></li>
<li><Link to="/home">Home</Link></li>
<li><Link to="/create-projects">Create</Link></li>
<li><Link to="/signed-in">Signed in</Link></li>
</ul>
</nav>
<hr />
</div>
<Route path="/home" component={Home}/>
<Route path="/signin-signup" component={SignIn}/>
<Route path="/create-projects" component={CreateProjects} />
<Route path="/signed-in" exact component={PostHeader}/>
<Route exact path="/" component={PreHome}/>
</div>
);
}
}
export default Header;
When I click to the links it just shows blank pages. 当我单击链接时,它仅显示空白页面。
Wrap your Routes in Switch. 在Switch中包装您的路线。 And when you wrap Route in Switch then write
<Route exact path="/" component={PreHome}/>
your last Route first. 然后,当您在Switch中包装Route时,请首先写上最后一个Route
<Route exact path="/" component={PreHome}/>
。 May b it'll help you. 可能会帮助您。
Try to map the route something like below: 尝试将路线映射如下:
ReactDOM.render(( <Router> <Route path="/" component={Header}> <Route path="/home" component={Home}/> <Route path="/signin-signup" component={SignIn}/> <Route path="/create-projects" component={CreateProjects} /> <Route path="/signed-in" exact component={PostHeader}/> <Route exact path="/" component={PreHome}/> </Route> </Router> ), document.getElementById('root')) class Header extends Component{ render(){ return( <div className="container"> <div> <h3>The Web App</h3> <nav> <ul> <li><Link to="/signin-signup">Sign in?</Link></li> <li><Link to="/home">Home</Link></li> <li><Link to="/create-projects">Create</Link></li> <li><Link to="/signed-in">Signed in</Link></li> </ul> </nav> <hr /> </div> {this.props.children} </div> ); } }
Here is the working demo for your reference. 这是工作示例供您参考。
Hope it helps :) 希望能帮助到你 :)
Just use Switch
component to wrap your Route
's components in Header
Component. 只需使用
Switch
组件将Route
的组件包装在Header
Component中即可。 Use Routes with exact
props in top. 在顶部使用带有
exact
道具的路线。
<Switch>
<Route exact path="/" component={PreHome}/>
<Route exact path="/signed-in" component={PostHeader}/>
<Route path="/home" component={Home}/>
<Route path="/signin-signup" component={SignIn}/>
<Route path="/create-projects" component={CreateProjects} />
<Switch>
You can also use render
props in Route component. 您也可以在Route组件中使用
render
道具。 It is similar to component
props but is useful for inline rendering and passing extra props to the element. 它与
component
道具相似,但对于内联渲染和将额外的道具传递到元素很有用。
<Switch>
<Route exact path="/" render={() => <PreHome />} />
<Route exact path="/signed-in" render={() => <PostHeader />}/>
<Route path="/home" render={() => <Home />} />
<Route path="/signin-signup" render={() => <SignIn />} />
<Route path="/create-projects" render={() => <CreateProjects />} />
<Switch>
Note: This works fine for react router v4 so please check your version 注意:这对于React Router v4来说很好用,所以请检查您的版本
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.