react-router-dom - 直接导航到路由答案

【问题标题】：react-router-dom - navigate directly to routereact-router-dom - 直接导航到路由
【发布时间】：2017-09-21 00:00:08
【问题描述】：

使用 react-router-dom 时，我是否可以通过在 URL 中手动输入路径来创建路由并导航到它？

const App = () =>
<Provider store={store}>
    <Router>
        <div>
            <Route exact path="/" component={QuotesLandingPage} />
            <Route path="/prequote" component={LoadingSpinner} />
        </div>
    </Router>
</Provider>;

所以，我将在本地主机上，当我在 navbar 中手动键入“/prequote”到 url 的末尾时，它不会重定向到我指定的组件，而是会抛出一个404.

这是预期的行为吗？

我一直在寻找答案，并看到一些建议将 webpack（我正在使用 webpack）配置为具有 devServer.historyApiFallback = true 应该可以工作，但它对我没有用。

【问题讨论】：

你使用的是哪个版本的 react-router-dom？
@TaylorKing 我正在使用 v4.1.1
我假设您的导入语句如下所示：
从 'react-router-dom' 导入 { BrowserRouter as Router };
这显然是您的开发服务器上的问题。如果不查看您的开发服务器配置，将无济于事。基本思想是让它工作，你的服务器应该总是用 index.html 响应任何 url。

标签： react-router react-router-redux react-router-dom

【解决方案1】：

是的，您可以通过在 URL 中手动输入路径来导航到任何定义的路径。例如：在下面的代码中，我创建了两个组件 Dashboard 和 information，并使用 react-router-dom 在我的应用程序中提供路由功能。使用以下代码，您可以导航到特定组件。如果您输入http://server:port/dashboard，它将导航到仪表板组件，如果您输入http://server:port/information，它将导航到信息组件

App.js 文件

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 
import React from 'react';
import Dashboard from './Dashboard.js';
import Information from './Information.js';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
    this.state = {message: "StackOverflow"};
  }
render(){
    return (
        <Router>
          <div>

            <Route exact path="/dashboard" render={props => <Dashboard {...props} />} />
            <Route exact path="/information" render={props => <Information {...props} />} />
          </div>
        </Router>
    );
}

}

Dashboard.js

import React from 'react';


class Dashboard extends React.Component {

  render() {

    return (
            <div ><h1> Hello React</h1></div>
    );
  }
}

export default Dashboard;

Information.js

import React from 'react';


class Information extends React.Component {

  render() {

    return (
            <div ><h1> Hello React-Router-DOM</h1></div>
    );
  }
}

export default Information;

希望对你有帮助。

【讨论】：

【解决方案2】：

也许您对 historyApiFallback 有同样的困惑，就像我曾经做过的那样。我会引用https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option:

但是，如果您在 Webpack 配置中修改了 output.publicPath，则需要指定要重定向到的 URL。这是使用 historyApiFallback.index 选项完成的。
historyApiFallback: {
  index: '/foo-app/'
}

就我而言，我终于通过将 historyApiFallback 选项更改为：

historyApiFallback: {
    index:'dist/'
},

将其视为 index:'dist/index.html'，而不是 devServer 抛出 404 来提供服务。

干杯

【讨论】：