Uncaught Error: s rendered outside of a router context cannot navigate.(…) react

Question

this is my app.js

import Index from './index'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'

import {Router, hashHistory, Route} from 'react-router'
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Index}>
        <Route path="Arabic" component={WeatherAr}/>
        <Route path="english" component={WeatherEng}/>
    </Route>
  </Router>, document.queryString('.container')
)

and this index .js

import React  from 'react';
import ReactDOM from 'react-dom';
import $ from "min-jquery";
import axios from "axios";
import { render } from 'react-dom'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'
import {Link} from 'react-router';


const urlP=`http://localhost:3000/blah`;

class App extends React.Component {
constructor(props){
    super(props);
    this.state={ 
      imagedayA:[],
      imagenightA:[]

      };
  }
   componentDidMount() {
     axios.get(urlP)
            .then(function (response) {
              console.log(response.data,"this is response")
              this.setState({
                imagedayA:response.data.today.iconday,
                imagenightA:response.data.today.iconnight,
              })  
          }.bind(this))
            .catch(function (response) {
              console.log(response);
          });
      }
  render(){
    return (
       <div>
            <button><Link to="WeaAr">another</Link></button>
            <button><Link to="WeaEng">English</Link></button>
            <div>{this.props.children}</div> 

        </div>

    );
  };
}


render(<App/>,document.querySelector('.container'));

https://i.stack.imgur.com/GwcYH.jpg I got new errors Uncaught TypeError: document.queryString is not a function(…) Warning: Failed propType: Invalid prop component supplied to Route. acctually the main idea is i want when click on another button it give yo component and when click on english button it move me to english component

Answer 1

I think your Link contains wrong to path, try this:

<button><Link to="Arabic">another</Link></button>
<button><Link to="english">English</Link></button>

And one more thing you are already rendering your App component through React Router, no need to render it again in App component by this:

render(<App/>,document.querySelector('.container')); Remove this line.

Use this code:

import Index from './index'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'


ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Index}>
        <Route path="Arabic" component={WeatherAr}/>
        <Route path="english" component={WeatherEng}/>
    </Route>
  </Router>, document.getElementById('container')
)

Put this line in html file: <div id='container'></div>