I have a working copy of the same code only differs come from typescript.
And this the code below somehow and exception message..
import * as React from 'react';
import Home from '../Home/Home';
import User from '../User/User';
import {
BrowserRouter as Router,Route,Link,Switch} from 'react-router-dom'
class Layout extends React.Component<{},{}> {
render() {
return (
<Router>
<div className="App">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/user/:id" userid="25" component={User}/>
<Route component={Notfound}/>
</Switch>
</div>
</Router>
);
}
}
and one of my component, home.tsx:
import * as React from 'react';
class Home extends React.Component<{},{}> {
render() {
return (
<div className="App">
Welcome Home Page!
</div>
);
}
}
Whats wrong here ?
Here is how I fixed the problem. As a commenter explained, there is some confusion for the compiler on how to explicitly handle passing in props.
App.tsx:
import * as React from 'react';
import './App.css';
interface State { }
// tslint:disable-next-line
class App extends React.Component<any, State> {
render() {
return (
<div className="App">
HIIIII
</div>
);
}
}
export default App;
index.tsx:
...
ReactDOM.render(
<Router>
<div>
<Route path="/" component={App} />
</div>
</Router>,
document.getElementById('root') as HTMLElement
);
I have not found a better solution yet. But this will indeed work.
Related
I am new to React and practicing with an online website for repairing appliances. I have used react-router and created all my routes in a separate file.
I have a problem though, I can open any link from the address bar like:
http://localhost:3000/<randomword>
I only want routes to be opened that I have declared in my routes component while if I type http://localhost:3000/something, I get an empty page with my header and footer in it.
here are my codes:
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import Routes from './Routes';
import './index.css';
const App = () => {
return(
<BrowserRouter>
<Routes />
</BrowserRouter>
)
}
ReactDOM.render(<App/>,document.getElementById('root'));
App.js:
import React, {Component} from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import Layout from './Containers/Layout';
import LandingPage from './Containers/Pages/LandingPage';
import About from './Containers/Pages/About';
import Cities from './Containers/Pages/Cities';
import Discount from './Containers/Pages/Discount';
class Routes extends Component {
render(){
return (
<div>
<Layout>
<BrowserRouter>
<Route path="/" render={props => <LandingPage {...props} />} exact component={LandingPage}/>
<Route path="/About" component={About}/>
<Route path="/Cities" component={Cities}/>
<Route path="/Discount" component={Discount}/>
</BrowserRouter>
</Layout>
</div>
);
}
};
export default Routes;
Layout.js:
import React, { Component } from 'react';
import Header from "./Layouts/Header";
import Footer from './Layouts/Footer';
import './Layout.css';
export default class Layout extends Component {
constructor(){
super();
this.state= {
}
}
render() {
return (
<div className="page-container">
<Header/>
<div className="content-wrap">
{this.props.children}
</div>
<Footer/>
</div>);
}
}
Can someone help me figure out how I should stop random random pages to be opened from addressbar?
Just want to start by saying I'm completely self-taught with React so I apologize if this answer is incorrect. However, in my experience with react-router I always have a Switch inside of my BrowserRouter. So your Routes class in app.js should something like this:
class Routes extends Component {
render(){
return (
<div>
<Layout>
<BrowserRouter>
<Switch>
<Route path="/" render={props => <LandingPage {...props} />} exact component={LandingPage}/>
<Route path="/About" component={About}/>
<Route path="/Cities" component={Cities}/>
<Route path="/Discount" component={Discount}/>
</Switch>
</BrowserRouter>
</Layout>
</div>
);
}
};
Just be sure you don't forget to update your imports to
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import { Redirect } from "react-router-dom"
<Route path="/not-found" component={notFound-Component} />
<Redirect to="/not-found" />
This will always redirect you to 404 component if route is not present just make a 404 component and u should add the redirect at the end after all routes are defined
I am trying a simple routing with React. My understanding is that with the below, the Navi component being routed should only appear in the root url and not appear in any other url, however this is not the case - no matter the url, the component always appears. Could someone explain what I am missing?
import React, { Component } from "react";
import Home from "./Home";
import Navi from "./Navi";
import Welcome from "./Welcome";
import logo from "./logo.svg";
import "./App.css";
import { Route, BrowserRouter as Router } from "react-router-dom";
class App extends Component {
constructor() {
super();
this.state = { user: "kungpow" };
}
render() {
return (
<div>
<Router>
<Navi user={this.state.user} />
<Route exact link="/" Component={Navi} />
</Router>
<Home user={this.state.user} />
<Welcome user={this.state.user} />
</div>
);
}
}
export default App;
Your are missing path prop. Replace link with path prop.
<Router>
<Route exact path="/" render={() => <Navi user={this.state.user} />} />
</Router>
Just started with React and wanted to define routes for my app. I understood the general concept of how react defines routes but my script that I basically wrote and don't understand a lot is slightly different from the examples found on youtube regarding routers. Can anyone help me?
App.js
import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import Header from "./layout/Header";
import Dashboard from "./users/Dashboard";
import Users from "./users/Users";
import { Provider } from 'react-redux';
import store from '../store';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
class App extends Component {
render() {
return (
<Provider store={store}>
<Fragment>
<Header />
<div className="container">
<Dashboard />
</div>
</Fragment>
</Provider>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
You need to read the documentation: Documentation
But for start let me show you a simple usage:
First wrap your code with Router component:
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<Fragment>
<Header />
<div className="container">
<Dashboard />
</div>
</Fragment>
</Router>
</Provider>
);
}
}
Then you can specify which component has to be shown when some specific url is reached. Like below:
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<Fragment>
<div className="container">
<Route path="/dashboard" component={Dashboard} />
</div>
</Fragment>
</Router>
</Provider>
);
}
}
Using the above code will render the Header always. And it will render Dashboard component only when you are on the page with the /dashboard in the url.
I am trying to route but it is not working it shows a blank page
here is the code
when I hit localhost:3000/home it is not showing anything
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
const Home = () =>{
return(
<div>
<p>Home</p>
</div>
);
}
class App extends Component {
render() {
return (
<Router>
<Route path='/home' Component={Home}/>
</Router>
);
}
}
export default App;
component prop in <Route /> is case-sensitive, make it lower case
class App extends Component {
render() {
return (
<Router>
<Route path='/home' component={Home}/>
</Router>
);
}
I am following a course where the author has written some code for routing in react using react-router version 3.
<Router history={browserHistory} >
<Route path="/" component={Main}>
<IndexRoute component={PhotoGrid}></IndexRoute>
<Route path="/view/:postId" component={Single}>
</Route>
</Router>
While following the course(in which I am using using router version 4), I came to know that now the <IndexRoute> doesn't exists. I googled for alternative and found that exact is the alternative. But I don't know how to use exact for meeting this requirement. The author want the Main component always on the DOM, and based on the url only the child components should change(i.e Single or PhotoGrid).
I tried below code, which is of course the wrong one:
<BrowserRouter>
<Switch>
<Route path="/" component={Main} />
<Route exact path="/" component={PhotoGrid} />
<Route path="/veiw/:postId" component={Single} />
</Switch>
</BrowserRouter>
My components are:
class Main extends React.Component {
render() {
return (
<div>
<h1>
<Link to="/">Reduxtagram</Link>
</h1>
{React.cloneElement(this.props.children, this.props)}
</div>
);
}
}
class PhotoGrid extends React.Component {
render() {
return <div className="photo-grid">PhotoGrid</div>;
}
}
class Single extends React.Component {
render() {
return <div className="single-photo">Single</div>;
}
}
The Switch component will only render the first Route that is a match.
You could use the Main component as a regular component and use the Switch as children for that.
<BrowserRouter>
<Main>
<Switch>
<Route exact path="/" component={PhotoGrid} />
<Route path="/view/:postId" component={Single} />
</Switch>
</Main>
</BrowserRouter>
i know this is an old question but im following the same course and i decided to update all the libraries, basically i had to restructure the app like this:
reduxtagram.js :
import React from 'react';
import {render} from 'react-dom';
import App from './components/App';
import {Provider} from 'react-redux';
import store from './store';
// import css
import css from './styles/style.styl';
// import react router deps
const router = (
<Provider store={store}>
<App/>
</Provider>
)
render(router , document.getElementById('root'));
main.js:
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import PhotoGrid from './PhotoGrid';
import Single from './Single';
import {Router, Route} from 'react-router-dom';
import {history} from '../store';
export default class Main extends Component {
render() {
return (
<div>
<Router history={history}>
<Route
path="/"
render={(routeProps) => (
<h1>
<Link to='/'>Reduxstagram </Link>
</h1>
)}/>
<Route
path="/grid"
render={(routeProps) => (
<PhotoGrid {...routeProps} {...this.props} />
)}/>
<Route
path="/grid/view/:postID"
render={(routeProps) => (
<Single {...routeProps} {...this.props} />
)}/>
</Router>
</div>
)
}
}