I am a beginner in React and trying to understand routing. I have created a learning project and want to render three different components each with a different path. However, all the paths result in the display of the App component.
I've tried finding solutions on multiple sources, but not able to figure out the issue! Please have a look. Thanks in advance.
Root.jsx
import React, { Component } from 'react';
import { Router } from 'react-router';
import { Redirect, Route, Switch } from 'react-router-dom';
import ScreensList from './List';
import ScreensWeather from './Weather';
import App from '../App';
const ScreensRoot = () => (
<Router>
<Switch>
<Route exact path='/' component={App}/>
<Route path="/list" component={ScreensList} />
<Route path="/weather" component={ScreensWeather} />
</Switch>
</Router>
);
export default ScreensRoot;
App.js
import React, {Component} from 'react';
import './App.css';
class App extends React.Component {
render(){
return (
<div>
Hello from App!
</div>
)
}
}
export default App;
List.jsx
import React from 'react';
import List from '../components/List';
const ScreensList = () => (
<div>
<List/>
</div>
);
export default ScreensList;
List.jsx
import React from 'react';
const List = (
<div>Hello from List Component!</div>
);
export default List;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './screens/Root';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
1.Insted of
import { Router } from 'react-router';
use
import { BrowserRouter as Router } from "react-router-dom";
2.change
const List = (
<div>Hello from List Component!</div>
);
to
const List = () => (
<div>Hello from List Component!</div>
);
3. As others mentioned
ReactDOM.render(<ScreensRoot />, rootElement);
Temporary codesandbox
As far as I can see, you've defined a ScreensRoot component but you're not using anywhere. Assuming you want that to be the actual root of your project, then in your index.js you must use it instead of App:
ReactDOM.render(<ScreensRoot/>, document.getElementById('root'));
(Note that you'll need to import ScreensRoot in your index.js in order for this to work).
Related
I am trying to learn react, but I am stuck with react render dom which doesn't want to render my page.
My App.js
import React from 'react';
import { Route } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';
function App() {
return (
<div>
<Route exact path='/' component={ HomePage }/>
</div>
);
}
export default App;
And my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
React Router v6 doesn't support exact anymore because all paths are match exactly by default. And component changes to element in v6. You need also to import Routes from react-router-dom.
Finaly, HomePage must be <HomePage/>
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';
function App() {
return (
<Routes>
<Route path='/' element={ <HomePage/> }/>
</Routes>
);
}
export default App;
I'm trying to test that my router is working as expected. But I can't get the router to point to another location than /
Here's my simplified test code.
App.tsx
import React from 'react';
import {Route, Switch, BrowserRouter} from 'react-router-dom';
const App: React.FC = () => {
return (
<div>
<BrowserRouter>
<Switch>
<Route path={'/test'}>test</Route>
<Route path={'/'}>index</Route>
</Switch>
</BrowserRouter>
</div>
);
};
export default App;
App.test.tsx
import React from 'react';
import App from './App';
import {MemoryRouter} from 'react-router-dom';
import {render} from '#testing-library/react';
test('renders /test route', async () => {
const app = render(
<MemoryRouter initialEntries={['/test']} initialIndex={0}>
<App/>
</MemoryRouter>);
expect(app.getByText(/test/i)).toBeInTheDocument();
});
I get the following error message
Error: Unable to find an element with the text: /test/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div>
<div>
index
</div>
</div>
</body>
What am I doing wrong?
The problem is, that the component I wanted to test already has a router declared.
To solve this issue I had to split up the App Component into App and Routes.
For the testing I just have to render the Routes component and everything works as expected.
App.tsx
import React from 'react';
import {Route, Switch, BrowserRouter} from 'react-router-dom';
export const Routes = () => {
return (
<>
<Switch>
<Route path={'/test'}> test</Route>
<Route path={'/'}> index</Route>
</Switch>
</>
)
};
const App: React.FC = () => {
return (
<div>
<BrowserRouter>
<Routes/>
</BrowserRouter>
</div>
);
};
export default App;
App.test.tsx
import React from 'react';
import {Routes} from './App';
import {MemoryRouter} from 'react-router-dom';
import {render} from '#testing-library/react';
test('renders routes correct', async () => {
const app = render(
<MemoryRouter initialEntries={['/test']} initialIndex={0}>
<Routes/>
</MemoryRouter>
);
expect(app.getByText(/test/i)).toBeInTheDocument();
});
If you're loading App from index.js, which was the case when I was running into this issue on a Create React App app, you can also wrap App in a Router there and then test App routes as you'd expect without having to export Routes as you've done.
For example (otherwise a stock CRA index.js):
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './app';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
Someone can help me please, I want to use react router but, but I have an error that I can not fix .
My error is : 'react-router' does not contain an export named 'browserHistory'.
My code Below
Thanks ^^
import React, { Component } from 'react'
import {Router, Route, Link,browserHistory,IndexRoute} from 'react-router'
import PostList from './containers/post_list'
class Routes extends Component {
render () {
return (
<div>
<Router history={browserHistory}>
<Route path="/" component={PostList}/>
</Router>
</div>
)
}
}
export default Routes
import React, { Component } from 'react'
class PostList extends Component {
render () {
return (
<div>
<h1>Liste des posts</h1>
</div>
)
}
}
export default PostList;
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import Routes from './routes.js';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<Routes/>
</Provider>
, document.querySelector('.container'));
React-Router v4 does not contain browserHistory.
Either downgrade to v3 or rewrite things to use v4.
See e.g. https://github.com/ReactTraining/react-router/issues/4732
Thanks AKX ^^
The right way below
import React, { Component } from 'react'
import { BrowserRouter, Route} from 'react-router-dom'
import PostList from './containers/post_list';
class Routes extends Component {
render () {
return (
<BrowserRouter>
<Route path="/new" component={PostList}/>
</BrowserRouter>
)
}
}
export default Routes
I am trying to display a react-component .I added some routing mechanism .but it not display my component.
here is my code
https://codesandbox.io/s/WnJl4DKOJ
import React from 'react';
import {Route} from 'react-router-dom';
import Hello from '../Hello';
const Routers = ()=> (
<Route exact path="/" component={Hello}></Route>
)
export default Routers;
Index.js
import React from 'react';
import { render } from 'react-dom';
import {Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import Routers from './router/router';
const history = createHistory();
render(
<Router routes={Routers} history={history}></Router>
, document.getElementById('root'));
You're not using the <Router /> properly. Make your <Routers /> a child of <Router />.
In your example, change <Router routes={Routers} history={history}></Router> to:
<Router history={history}>
<Routers />
</Router>
<Router/> provides the required context for the routes.
You need to modify your code as
import React from 'react';
import {Route} from 'react-router-dom';
import Hello from '../Hello';
const Routers = ()=> (
<Router>
<Route exact path="/" component={Hello}/>
</Router>
)
export default Routers;
index.js
import React from 'react';
import { render } from 'react-dom';
import {Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import Routers from './router/router';
const history = createHistory();
render(<Routers history={history}/>, document.getElementById('root'));
I'm running into an issue where my React components are just not being bootstrapped into the page, but no error messages are showing up so I don't know what's going on. I don't believe that the issue is with the CalcList.js or Calculator.js files, since I've been able to render them without any issue in a single-page (i.e. not using react-router) context.
Implemented using the index.js and App.js parents below, when I visit I just get an empty page without any feedback from the console.
index.js
import React from 'react';
import {render} from 'react-dom';
import {Router, Route, Link, IndexRoute, browserHistory} from 'react-router';
import App from './App';
import {Calculator} from './Calculator';
import {CalcList} from './CalcList';
render ((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={CalcList} />
<Route path="/calculator/:num" component={Calculator} />
</Route>
</Router>
), document.getElementById('root'));
App.js
import React, { Component } from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute, hashHistory} from 'react-router';
import CalcList from './CalcList';
import Calculator from './Calculator';
export default class App extends Component {
render() {
var children = React.Children.map(this.props.children, function(child) {
return React.cloneElement(child);
});
return (
<div id="app">
{children}
</div>
);
}
}
Your already defining the default export in your components so the following lines are incorrect in index.js:
import {Calculator} from './Calculator';
import {CalcList} from './CalcList';
change to this:
import Calculator from './Calculator';
import CalcList from './CalcList';
Alternatively, You could create an object that exports those components like this:
components.js:
import Calculator from './Calculator';
import CalcList from './CalcList';
export {
Calculator,
CalcList
}
and then your original imports would work like this:
import { Calculator, CalcList } from './components';