Question

我是新手做出反应并尝试为每个页面设置一个标题组件。我的标题组件正在加载但是孩子们没有加载。

Index.js

import React from "react";
import {render} from "react-dom";
import {BrowserRouter, Route,Switch} from 'react-router-dom';

import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";

class App extends React.Component {

    render(){
     return (       
        <BrowserRouter >
            <Switch>
                <Route path="/" component={Root} >
                    <Route path="/user" component={User}/>
                    <Route path="/home" component={Home}/>           
                </Route>
            </Switch>
        </BrowserRouter>
     )  ;
    }
}

render(<App />,window.document.getElementById("app"));

的package.json

{
  "name": "react-1",
  "version": "1.0.0",
  "description": "My first react app",
  "main": "index.js",
  "scripts": {
    "start": "npm run build",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
    "build-prod": "webpack -p && cp src/index.html dist/index.html"
  },
  "author": "Saurabh",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.26.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

Root.js

import React from "react";
import {Header} from "./Header";

export class Root extends React.Component {
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                       dummy text{this.props.children}
                    </div>
                </div>
            </div>
        );
    }
}

Header.js

import React from "react";
export const Header =(props) => {
    return (
        <nav className="navbar navbar-default"> 
            <div className="container">
                <div className="navbar-header">
                    <ul className="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">User</a></li>
                    </ul>
                </div>    
            </div>
        </nav>
    );
};

我可以看到虚拟文本，但是当我尝试/ user或/ home时，各个页面都没有加载。该页面已刷新。

Answer 1

嵌套路由在react-router v4中的工作方式不同。您应该将嵌套路由直接移动到Root组件render方法中。

Index.js

import React from "react";
import {render} from "react-dom";
import {BrowserRouter, Route,Switch} from 'react-router-dom';

import {Root} from "./components/Root";

class App extends React.Component {

    render(){
        return (
            <BrowserRouter >
                <Switch>
                    <Route path="/" component={Root} />
                </Switch>
            </BrowserRouter>
        )  ;
    }
}

render(<App />,window.document.getElementById("app"));

Root.js

import React from "react";
import {Header} from "./Header";
import { Route, Switch } from 'react-router-dom';

import {Home} from "./components/Home";
import {User} from "./components/User";

export class Root extends React.Component {
    render(){
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        dummy text{this.props.children}
                    </div>
                </div>
                <Switch>
                    <Route path="/user" component={User}/>
                    <Route path="/home" component={Home}/>
                </Switch>
            </div>
        );
    }
}

Switch中的Index.js将路由到Root组件，该组件拥有自己的Switch，该组件将呈现匹配的第一个Route网址。

嵌套路由路由起反应

1 个答案: