嵌套路由路由反应

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

我可以看到虚拟文本，但是当我尝试/用户或/回家时，相应的页面没有被加载。该页面被刷新。

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

Index.js中的Switch将路由到具有其自己的Switch的Root组件，该组件将渲染与URL匹配的第一个Route。