javascript - 将 'react-router' 迁移到 'react-router-dom' (v4)

Question

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

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

它是 2016 年的教程，所以我想有些事情发生了变化，因为“react-router”不再工作，我应该使用“react-router-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

看完视频后，您可能想要这样的东西。起初这不会那么容易理解，但在看到其中的一些之后你就会消化它。首先，您使用一个 Route 渲染您的 Layout。然后在这个顶级路由中，您使用其他 Route 来设置您的组件。

我们通常使用 exact prop 作为顶根，例如 /。如果你没有像这样设置你的应用程序，例如你所有的路由都在你的顶级 Router 配置中，那么要使用类似 /featured 的路由，我们必须有 exact Prop 。如果我们不使用它，Router 总是命中 / 路径，我们总是看到顶级组件。

但是，在您的情况下，您希望在顶级组件中路由其他组件。因此，我们在这里删除 exact 属性。

你也可以使用push来改变历史。

更新

考虑到名为“Featured”的导航按钮后，我认为您希望 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);