链接到 reactjs 中的新选项卡

Question

我尝试使用 React 路由器中的链接在新选项卡中打开一个组件，它打开了一个 404 not found 而不是 react 组件，

React 入口点 js，

import React from 'react';
import { render } from 'react-dom';
import { Route,Router, browserHistory} from 'react-router';
import Home from './components/Home';
import About from './components/About';

render((
    <Router history={browserHistory}>
        <Route path="/Home" component={Home}></Route>
        <Route path="/about" component={About}></Route>
    </Router>

), document.getElementById('reactDiv'));

主页组件，

import React from 'react';

export default class Home extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
            <h2> Home Page </h2>
            <Link to={`/about`} target="_blank"> 
                About
            </Link>
      </div>
    );
  }
}

关于组件

import React from 'react';

export default class About extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
            <h2> About Page </h2>
      </div>
    );
  }
}

我希望 About 组件会显示在新标签中，但它会打开一个新标签并出现 404 page not found 错误。

谁能告诉我如何在新标签页中打开组件。

Answer 1

我怀疑 Webpack 没有“授权”处理您当前服务器上的所有路由请求。

如果您使用的是express，那么在您的server.js 中，请确保您的路线定义为：

app.get('*', function(req, res) {
  res.sendFile(path.join( __dirname, 'path/to/index.html'));
});

* 通配符告诉 express 在每个路由请求上呈现您的 index.html。

我建议的另一个修改是从路由定义中删除前面的斜杠。试试吧：

我尝试使用 React 路由器中的链接在新选项卡中打开一个组件，它打开了一个 404 not found 而不是 react 组件，

  <Route path="Home" component={Home}></Route>
  <Route path="about" component={About}></Route>

过去，我在使用 react-router 绝对定义路径时遇到了一些问题。

Answer 2

你的路由器应该是这样的：

<Router history={browserHistory}>
    <Route path="/" component={App}>
         <IndexRoute component={Home}/>
         <Route path="about" component={About} />
    </Route>
</Router>

那么你的应用应该是这样的：

import React from 'react';

class App extends React.Component {
    render() {
        return (
            {this.props.children}
        );
    }
}


export default App;

这应该可以解决问题。

更新

你的链接应该是<Link to="about">About </Link>