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 exact path="/" component={PreHome}/>您的最后一个Route。可能会帮助您。

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

这是工作demo，供您参考。

希望它会有所帮助：）

Answer 3

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

您还可以在“路线”组件中使用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，因此请检查您的版本

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

3 个答案: