Question

我正在学习React Routing，并且正在观看本教程：

https://www.youtube.com/watch?v=1iAG6h9ff5s

它的2016年教程，所以我想因为“反应路由器”不再工作而应该做些改变，而我应该使用“反应路由器-dom”。

我发现我必须卸载'history'和'react-router'并改用'react-router-dom'，但是当我更改它时，它无法按预期工作。

如何对其进行编辑以使其与“ react-router-dom”一起使用？

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

import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";

const app = document.getElementById('app');
ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Featured}></IndexRoute>
            <Route path="archives" component={Archives}></Route>
            <Route path="settings" component={Settings}></Route>
        </Route>
    </Router>,
    app);

我的编辑

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";

import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";

const app = document.getElementById('app');

ReactDOM.render(
    <Router>
        <Route path="/" component={Layout}>
            <Route path="/featured" component={Featured}/>
            <Route path="/archives" component={Archives}/>
            <Route path="/settings" component={Settings}/>
        </Route>
    </Router>,
    app);

pushState也不起作用... Layout.js

import React from "react";
import {Link} from "react-router-dom";

export default class Layout extends React.Component {
    navigate() {
        this.props.history.pushState(null, "/");
    }

    render() {
        return (
            <div>
                {this.props.children}
                <h1>Welcome</h1>
                <button onClick={this.navigate.bind(this)}>Featured</button>
            </div>
        );
    }
}

当我单击以更改链接URL，但未加载内容时...同样，当我访问URL时，也会出现“无法获取”错误

Answer 1

观看视频后，您可能想要这样的东西。最初，这不是那么容易理解，但是在看到其中的一些内容之后，您就可以将其消化。首先，用一个Layout渲染Route。然后，在此首要路线中，您使用其他Route来设置组件。

我们通常将exact道具用于/之类的上根。如果您不这样设置应用程序，例如，所有路由都在顶部的Router配置中，那么要使用类似/featured的路由，我们必须具有exact属性。如果我们不使用它，Router总是点击/路径，我们总是会看到顶层组件。

但是，根据您的情况，您希望在顶级组件中路由其他组件。因此，我们在这里放下exact道具。

您还可以使用push更改历史记录。

更新

考虑一下名为“功能”的导航按钮之后，我想您希望此处将Featured组件呈现为默认组件。再次按下该按钮，您将返回到Featured。我已根据此更改了代码。在此版本中，我们在/中添加Layout路由并将其指向Featured。因此，当我们来到这里时，它就被渲染了。但是，我们在这里使用exact属性，因为我们还希望使用“ / featured”，“ / archives”和“ / settings”之类的路由。

export default class Layout extends React.Component {
  navigate = () => this.props.history.push("/");

  render() {
    return (
      <div>
        <h1>Welcome</h1>
        <Link to="/featured">Featured</Link>
        <Link to="/archives">Archives</Link>
        <Link to="/settings">Settings</Link>
        <br />
        <button onClick={this.navigate}>Featured</button>
        <Route exact path="/" component={Featured} />
        <Route path="/featured" component={Featured} />
        <Route path="/archives" component={Archives} />
        <Route path="/settings" component={Settings} />
        <div>
        Some other info.
        </div>
      </div>
    );
  }
}

const app = document.getElementById('root');

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/" component={Layout} />
    </Switch>
  </Router>,
  app);

将“ react-router”迁移到“ react-router-dom”（v4）

1 个答案: