为什么我无法访问我的应用程序的其他页面

Question

所以我一直在搞弄ReactJS，无法进入其他页面而陷入困境。 我不确定下面的代码是什么问题。

我正在尝试使用React制作一个多页面应用程序，所以我想让我的某些页面具有不同的标题，例如具有一些额外的按钮或链接。

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

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;

当我单击链接时，它仅显示空白页面。

Answer 1

在Switch中包装您的路线。 然后，当您在Switch中包装Route时，请首先写上最后一个Route <Route exact path="/" component={PreHome}/> 。 可能会帮助您。

Answer 2

尝试将路线映射如下：

  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> ); } } 

这是工作示例供您参考。

希望能帮助到你 ：）

Answer 3

只需使用Switch组件将Route的组件包装在Header Component中即可。 在顶部使用带有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>

您也可以在Route组件中使用render道具。 它与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>

注意：这对于React Router v4来说很好用，所以请检查您的版本