Question

我正在尝试通过react-router和typescript在我的网站上进行导航。但它没有工作，而不是主页我得到一个空页

这就是我的app.tsx文件

// app.tsx

import * as React from 'react';
import '../App.css';

class App extends React.Component<any,any> {
  public render() {
    return (
      <div>
          {this.props.children}
      </div>
    );
  }
}

export default App;

index.tsx

// index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {AppRouter} from './router';


ReactDOM.render(
  <AppRouter/>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

router.tsx

import * as React from 'react';
import { Route,Router } from 'react-router';

import App from './components/App';

import HomePage from './components/home/HomePage';

import createHistory from 'history/createBrowserHistory';

const history = createHistory();

export const AppRouter = () => {
    return (
        <Router history={history}>
            <Route path="/" component={App} >
                <Route path="/" exact={true} component={HomePage} />
            </Route>
        </Router>
    );
}

我真的不知道该说些什么。我找不到任何可能的信息。如果你知道使用打字稿，反应和减少导航的更好方法，我愿意接受想法。 THX

Answer 1

在App组件中，您正在执行{this.props.children}。所以你不应该把那个组件传递给任何路线。

您需要将所有路线添加为该组件的子项，您可以通过该路径将子项放入道具中。

此外，要在路由之间切换，您应该绑定从react-router导入的“Switch”中的所有路由。

因此，您的router.tsx文件应如下所示：

import * as React from 'react';
import { Route, Router, Switch } from 'react-router';
import App from './components/App';
import OtherComponent from './components/OtherComponent';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

export const AppRouter = () => {
  return (
    <App>
      <Router history={history}>
        <Switch>
          <Route exact={true} component={HomePage} />
          <Route path="/other" component={OtherComponent} />
        </Switch>
      </Router>
    </App>
  );
}

这样，您将获得路线'/'处的'HomePage'组件和路线'/ other'处的OtherComponent。

this.props.children不使用react-router

1 个答案: