Why does the router respond to the "Cannot GET / example" error?

Question

I am learning React and I need to add some routes with React Routes.

I installed react-routerusing npm install react-router.

This is main jswhere I have to declare routes

import React from 'react';
import {ReactDOM, render} from 'react-dom';
import App from './Components/AppComponent';
import Example from './Components/ExampleComponent';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'


render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));

Navigation in /works fine. But when I go to /exampleI get:

I can not get /example

mistake

What am I doing wrong?

So I have the same problem:

<Router>
    <Route path="/" component={App} />
    <Route path="/example" component={Example}/>
</Router>

Component Example

import React from 'react';

class Example extends React.Component {
    render(){
        return <div>Example</div>
    }
}

export default Example

This is Link:

<Link to={'/example'}>aa</Link>

There are no errors in the console.

After the change, I get these errors in the console (caused Link)

index.js (line 27585) Warning: [reaction-router] Location "/" does not match any route

index.js ( 27585) : [-] Router . , hashHistory. https://github.com/ReactTraining/react-router/blob/master/upgrade-guides/v2.0.0.md#no-default-history

Answer 1

, / /example.

IndexRoute , .

, , , , URL-, , .

, {this.props.children}, , , , , App ( AppController), Home, /, , IndexRoute , , .

<Link to="example">
  Click Me!
</Link>

Main:

import React from 'react';
import {ReactDOM, render} from 'react-dom';
import App from './Components/AppComponent';
import Home from './Components/Home';
import Example from './Components/ExampleComponent';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'


ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));

AppController:

import React from 'react';

class App extends React.Component {

  render() {
    return (
      <div>
        <div className="routerView">
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

:

import React from 'react';
import {Link} from 'react-router';


class Example extends React.Component {
    render(){
        return(
          <div>
              Example
              <Link to="/">Click Me!</Link>
          </div>
        )
    }
}

export default Example

:

import React from 'react';
import {Link} from 'react-router';

class Home extends React.Component {
    render(){
        return (
            <div>
               Home
               <Link to="/example">To Example!</Link>
            </div>
        )
    }
}

export default Home

Answer 2

, .

. , , <IndexRoute component={Home}> .

, :

1) , , hashHistory import { Router, Route, IndexRoute, hashHistory } from 'react-router'; Router <Router history={hashHistory}>

URL- http://localhost:5000/#/example?_k=a979lt

2) useHistory.

# URL, http://localhost:5000/#/example , false.

3) browserHistory, localhost: 5000/#/example .

. https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md

EDIT: , , . , . fooobar.com/questions/501586/...

Answer 3

v4, Webpack devServer webpack.config.js , . , devServer historyApiFallback true, , , devServer webpack.config.js, , , -....

module.exports = {

 ...

 devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    open: true,
    historyApiFallback: true,
    stats: 'minimal'
  }

 ...

}

Answer 4

render((
    <Router history={browserHistory}>
        <Route exact path="/" component={App}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));