Question

使用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上，当我手动输入＆＃39; /prequote＆＃39;在url navbar的末尾，它没有重定向到我指定的组件，而是抛出404。

这是预期的行为吗？

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

Answer 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：＆＃39; dist / index.html＆＃39; ，而不是投掷404的devServer。

干杯

Answer 2

是，您可以通过在Url中手动输入其路径来导航到任何已定义的路径。例如：在下面的代码中，我创建了两个组件Dashboard和信息，我使用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;

我希望它会对你有所帮助。

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

2 个答案: