离开主页时，React-router V-5.2.0 不起作用

Question

index.tsx

import {Router, } from 'react-router';
import { createHashHistory } from 'history';

  const hashHistory = createHashHistory();
  hashHistory.push("/");
  ReactDOM.render(
    <Provider {...stores}>
      <Router history={hashHistory} >
          <App />
      </Router>
    </Provider>,
    document.getElementById('root') as HTMLElement
  );

App.tsx

import Router from './components/Router';
  public render() {
    return <Router/>;
  }

路由器

import { Route, Switch } from 'react-router';

const Router = () => {
  const UserLayout = utils.getRoute('/user').component;
  const AppLayout = utils.getRoute('/').component;
  
  return (
    <Switch>
      <Route path="/user" render={(props: any) => <UserLayout {...props} />} />
      <Route path="/test" render={() => <div>Test</div>} />
      <ProtectedRoute path="/" render={(props: any) => <AppLayout {...props} exact />} />
    </Switch>
  );
};

电子

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const isDev = require('electron-is-dev');
const path = require('path');
const url = require('url');
var history = require('connect-history-api-fallback');

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    nodeIntegration: true,
    webPreferences: {
      webSecurity: false
    }
  });

  mainWindow.loadURL(!isDev ? 'http://localhost:3000' : url.format({
    pathname: path.join(__dirname,'../build/index.html'),
    protocol: 'file:',
    slashes: true,
  }));
  
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', createWindow);
app.on('ready', () => console.log('Ready', history({index: 'index.html'})));

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
console.log('global window', __dirname);
app.on('activate', function () {
  console.log('mainWindow', __dirname);

  if (mainWindow === null) {
    console.log('mainWindowNull', __dirname);
    createWindow();
  }
});

我也尝试过使用“react-router-dom”，但它也不起作用。这只发生在生产中。 即使我重新加载主页也会加载。但是，例如，当我离开主页时，我单击登录按钮会引发错误并且屏幕是白色的。在我的网络选项卡中，它以红色显示 file:///D:。我也没有使用 Webpack。

Answer 1

和示例使其与react-router-dom 一起使用。

在你的 index.tsx 文件中导入它

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
  <App />
</BrowserRouter>

redux 存储也将包装浏览器路由器，因为您正在使用它。无需导入历史和/或创建 hashHistory。

您可以像这样声明您的路线：

<Switch>
    <Route exact path="/home" component={Home} />
</Switch>

或

 <Route
      path="/blog/:slug"
      render={({ match }) => {
        // Do whatever you want with the match...
        return <div />;
      }}
    />

现在，如果您想导航到组件内的任何位置，您需要导入 withRouter

import { withRouter } from 'react-router-dom';

组件内部

并用它包装导出：

export default withRouter(DemoComponent);

这会将历史对象作为道具传递给您的组件。要离开，只需调用：

props.history.push('/'); // can be anything here you want to navigate to

如果你不使用函数式组件，它可能看起来像这样：

this.props.history.push('/');