Question

我尝试使用React路由器中的Link打开新选项卡中的组件，它打开404找不到反应组件，

反应入口点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'));

Home Component，

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页面错误。

任何人都可以告诉我如何在新标签页中打开组件。

Answer 1

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

如果您使用express，则在server.js中，确保将路线定义为：

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

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

我建议的另一个编辑是从路径定义中删除前面的斜杠。尝试制作它：

我尝试使用React路由器中的Link打开新选项卡中的组件，它打开404找不到反应组件，

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

链接到reactjs

关于组件

2 个答案: