将 w=10=sh 迁移到 w=11=sh (ch)

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

当我单击 Link url 更改时，但未加载内容...此外，当我访问 url 时，出现 "Cannot GET" 错误

Answer 1

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

我们通常使用 exact props 作为顶根，例如 /。如果你没有像这样设置你的应用程序，例如你所有的路由都在你的顶部 Router 配置中，那么要使用类似 /featured 的路由，我们必须有 exact 属性。如果我们不使用它 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);

将 w=10=sh 迁移到 w=11=sh (ch)

Migrate 'react-router' into 'react-router-dom' (v4)

javascript

reactjs

react-router

react-router-v4

react-router-dom