5

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

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

所以，我将在 localhost 上，当我手动输入 ' /prequote' 到结尾时，url它navbar不会重定向到我指定的组件，而是抛出 404。

这是预期的行为吗？

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

4

2 回答 2

1

也许你和我曾经对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 来提供服务。

干杯

于 2017-05-11T15:48:51.747 回答
0

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

应用程序.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>
    );
}

}

仪表板.js

import React from 'react';


class Dashboard extends React.Component {

  render() {

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

export default Dashboard;

信息.js

import React from 'react';


class Information extends React.Component {

  render() {

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

export default Information;

我希望它会帮助你。

于 2017-05-05T02:51:02.917 回答