时间戳

首页 > 解决方案 > 如何使用普通路由定义配置 react-router v3？

javascript - 如何使用普通路由定义配置 react-router v3？

问题描述

我正在尝试使用 react-router v3 获得简单的路由定义，但正如您从这个 Codesandbox中看到的那样，没有任何组件正在加载。

这是代码：

import Home from "/components/Home";
import About from "/components/About"; 

class App extends React.Component {
  render() {
    return <Router history={hashHistory} children={this.props.routes} />;
  }
}

let routes = {
  path: "/",
  childRoutes: [Home, About]
};

const root = document.getElementById("root");
ReactDOM.render(<App routes={routes} />, root);

我在这里错过了一些非常明显的东西吗？

这是我正在使用的软件包（及其版本）：

"react": "^15.6.2",
"react-dom": "^15.6.2",
"react-router": "^3.0.0",

标签： javascriptreactjsreact-router

解决方案

首先，顶部的导入不正确。您应该使用relative路径来包含组件。
第二，要定义一个 Routes 结构，你应该使用<Route />组件。

在这里，我对您的代码进行了一些更改：

import React from "react";
import ReactDOM from "react-dom";
import { hashHistory, Router, Route } from "react-router";

// components
import Home from "./components/Home";
import About from "./components/About";

class App extends React.Component {
  render() {
    const { routes } = this.props;

    return (
      <Router history={hashHistory}>
        {routes.childRoutes.map(({ Component, path }) => (
          <Route key={path} component={Component} path={path} />
        ))}
      </Router>
    );
  }
}

let routes = {
  path: "/",
  childRoutes: [
    {
      Component: Home,
      path: "home"
    },
    {
      Component: About,
      path: "about"
    }
  ]
};

const root = document.getElementById("root");
ReactDOM.render(<App routes={routes} />, root);

链接到沙箱https://codesandbox.io/s/6lvmry9pqk。

页面：
https ://6lvmry9pqk.codesandbox.io/#/home
https://6lvmry9pqk.codesandbox.io/#/about

推荐阅读