Link to new tab in reactjs

0
votes

I tried to open a component in new tab using Link in React router, it opens a 404 not found instead of react component,

React entry point 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>
    );
  }
}

About Component

import React from 'react';

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

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

I expected the About component to display in new tab, but it opens a new tab with 404 page not found error.

Could any one let me know how to open a component in new tab.

2
reactjsreact-router
you have to setup `historyApiFallback' to true – Praveen Prasad
i didnt use webpack dev server, so how to set this historyApiFallback option?? – Nithila
make sure, on server (any), when no route matches on server, you serve your html file that contains react's generated .js file. – Praveen Prasad
You need to use this.props.children in Home component. – Boky

2 Answers

0
votes

I would suspect Webpack isn't 'empowered' to handle all routes request on your current server.

If you are using express, then in your server.js, make sure you have your routes defined as:

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

The * wildcard tells express to render your index.html on every route request.

Another edit I'd suggest is that you remove the preceeding slashes from your route definitions. Try making it:

I tried to open a component in new tab using Link in React router, it opens a 404 not found instead of react component,

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

I've had some issues with absolutely definiting paths with react-router in the past.

0
votes

Your router should be something like :

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

Then your app should be something like :

import React from 'react';

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


export default App;

That should do the trick.

UPDATE

Your link should be <Link to="about">About </Link>