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

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

所以，我将在本地主机上，并且当我手动键入“ /prequote”来的端部url在navbar它不重定向到我已指定该组件，而不是将其抛出一个404。

这是预期的行为吗？

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

Answer 1

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

我希望它能帮助你。