在 React 中通过 url 导航到特定页面答案

【问题标题】：Navigate to a specific page by url in React在 React 中通过 url 导航到特定页面
【发布时间】：2019-07-19 21:42:35
【问题描述】：

如何在 React 中使用 url 导航到特定页面？我意识到我过去曾使用过 CRA，但并没有真正专门解决这个问题。

目前我正在使用 BrowserRouter 渲染 ReactDOM，并使用 Routes 中的确切路径切换

// index.jsx
/* eslint-disable import/extensions */
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './app/App.jsx';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

// App.jsx
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from '../components/Header';
import HomePage from '../pages/Home';
import PlansPage from '../pages/Plans';
import NotFoundPage from '../pages/NotFound';

const App = () => (
  <BrowserRouter>
    <Header />
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/plans" component={PlansPage} />
      <Route component={NotFoundPage} />
    </Switch>
  </BrowserRouter>
);

export default App;

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  devtool: false,
  module: {
    rules: [
      {
        test: /\.m?(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [{
          loader: 'style-loader',
          options: {
            sourceMap: true,
          },
        }, {
          loader: 'css-loader',
          options: {
            sourceMap: true,
          },
        }, {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
          },
        }],
      },
    ],
  },
  entry: './src/index.jsx',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
    new webpack.SourceMapDevToolPlugin({}),
  ],
};

导航到http://localhost:8080/plans 会转到带有Cannot GET /plans 的页面。但是，单击 Link 元素可以毫无问题地导航到该计划页面。

【问题讨论】：

你是在使用 CRA 还是没有带有自定义 webpack 配置的 cli？
@Jorden 这个没有 CRA。我将使用自定义 webpack 配置
我认为你需要包装 Header 和 Switch，因为 BrowserRouter 应该只有一个孩子
您是否使用 webpack 开发服务器进行配置？如果是这样，我知道您的问题是什么，因为我有几个月的确切问题，它解决了我的问题。
@jorden 嗯，实际上我没有使用开发服务器。 ://

标签： reactjs url navigation

【解决方案1】：

是的，因为您使用的是 webpack Dev Server，您所要做的就是添加 historyApiFallback=true，它会解决您的问题。您实际上是在告诉所有路由回退到您的 index.html 文件。希望对您有所帮助。

【讨论】：