react router won't serve me components other paths than '/' - javascript

Hi i added react router to my project but it wont serve me path others than '/'
import React from 'react';
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import store from './reducers'
import Header from './header/header'
import Toolbar from './toolbar/toolbar'
import Createprocess from './createprocess/createprocess'
import Hider from './createprocess/hider'
ReactDOM.render(<Provider store={store}>
<Router>
<Route path='/module' component={Createprocess} />
</Router>
</Provider>,
document.getElementById('root')
)
ReactDOM.render(<Header/>,document.getElementById('header'))
ReactDOM.render(<Toolbar/>,document.getElementById('tools-bar'))
this my createprocess component code :
import React, {Component} from 'react'
import Actionsbar from './actionsbar'
import Processdisp from './processdisplay'
import DefineTask from './taskdefinition'
import store from '../reducers'
export default class Createprocess extends Component{
render(){
return (<div id='create-process' className='default app-container'>
<Actionsbar/>
<Processdisp data={store.getState().processState}/>
<DefineTask/>
</div>)
}
}
when i add the module path i can't get it from my browser even if i used many combination
but the only time react renders is when i use th '/' path and i call my html page on the browser
i'm web designer i started webdevelopping recently and it seem that i can't get my head around those paths and serving pages, help please (i'm using babel/webpack).

Wrap the route in a Switch component from react router

I found the solution, it seems that because there is no server serving pages i should have user HashRouter istead of BrowserRouter

Related

React authentication isn't updating properly

when i have my functions in UserAuthContext.js my App isn't working properly. I try to login but the user is not directet to /browse as it should. But if i put the same code in app.js i can create and login with an account. I don't know what the reason is
here is the code
https://codesandbox.io/s/cool-euler-eicfr?file=/src/App.js
-not working version (above code belongs to this): https://not-working.netlify.app/
-working version where i have the code in app.js
https://netflix-clone-kasamtde.netlify.app/
You cannot use useAuthContext in a component that is not a child of UserAuthContextProvider. It will always return undefined
Easiest fix for this is to move UserAuthContextProvider into index.js:
// index.js
import React from 'react';
import {render} from 'react-dom';
import './index.css';
import App from './App';
import UserAuthContextProvider from "./components/Contexts/UserAuthContext.js";
render(
<React.StrictMode>
<UserAuthContextProvider><App /></UserAuthContextProvider>
</React.StrictMode>,
document.getElementById('root')
);

Issue creating shared react router component with create-react-app - Error: Invariant failed: You should not use <Link> outside a <Router>

I'm getting an error when trying to render react-router as a shared component (and have any idea why it isn't working but wanted to confirm.)
I wanted to make a shared NavBar for two similar react apps using create-react-app. When I pull out the component with a <Link> element into a shared component I get the Invariant error because it can't see that I'm calling it within <BrowserRouter>
My thought is you can't have any shared components that use react-router because they need to see in the same directory that <BrowserRouter> is available? Is that the case (or is there a way to fix this and I'm doing it wrong).
Help appreciated!
My index.ts in (app/src)
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.unregister();
my App.tsx (in app/src)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NavBar from '../../common/src/NavBar/NavBar'; // this only works if it's ./NavBar/NavBar in same src directory
import Footer from '../../common/src/Footer/Footer'
class App extends Component {
render() {
return (
<div>
<NavBar/>
<p>Work in progress.</p>
<Footer/>
</div>
);
}
}
export default App;
my NavBar.tsx (in common/src and transpile with react-app-rewired and removeModuleScopePlugin(), or compiled and in common/lib as NavBar.js and imported - I get the same error both ways)
import React from 'react';
import { Link } from 'react-router-dom';
function NavBar() {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
Logo
</Link>
<div>
description
</div>
</nav>
);
}
export default NavBar;

React Failed to compile. Module not found: Can't resolve, How to compile with react-router?

I am dealing with an issue on two new projects I have just started and I have it configured the way I have it on another in production and for some reason I can't seem to find the bug here.
I have started my react project with the latest version of create-react-app using: npx create-react-app myapp and for some reason my app does not compile locally with react-router-dom.
Here are my dependencies in my package.json:
"dependencies": {
"react": "^16.8.6",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.8.6",
"react-router-dom": "^4.3.1",
"react-scripts": "3.0.1"
I have an index.js file where I am wrapping my <App /> component inside of the <Router /> component that I am importing with BrowserRouter as specified from react-router-dom.
Here are the contents of my index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<Router>
<App />
</Router>,
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.
// Learn more about service workers:
serviceWorker.unregister();
From there my <App /> component implements a custom <Routes /> component that uses Route and Switch from react-router-dom to handle my app's routing needs.
Here are the contents of my <App /> component:
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import Routes from "./Routes.js";
import "./App.css";
class App extends Component {
render() {
return (
<div className="App container">
<Navbar fluid collapsOnSelect>
...... misc navbar code
</Navbar>
<Routes />
</div>
);
}
}
export default App;
This is what my Routes.js file looks like and how it uses the Route and Switch from react-router-dom:
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";
export default () => <Switch>
<Route path="/" exact component={ Home } />
</Switch>;
Here is the { Home } component that I am trying to serve up locally:
import React, { Component } from "react";
import "./Home.css";
export default class Home extends Component {
render() {
return (
<div className="Home">
<div className="LandingPage">
... random html code
</div>
</div>
);
}
}
And finally here is the error:
What do you think could be the problem here??? Thanks !
UPDATE: Adding File Hierarchy
Ah! So it was with the file hierarchy. Routes.js is in src, so it's looking in src/components, which doesn't exist.
Instead, make it import Home from "../containers/Home";, or restructure the project so that containers is inside src.
Your routes.js should be
import Home from "../containers/Home";
You gotta go up one directory to get to where containers is, the way you have it set up looks for containers inside there src

Basic router template example - no url access

I am trying to set a basic example of react router where I have two simple routes, greetings and signup, under a template setup. Currently, I am not getting any errors on load, however, when trying to access the /signup route by typing it in to the address bar, I am getting the following error: Cannot GET /signup and I am having trouble understanding why.
Did anyone else run into this issue with react-router-dom v4? I appreciate any suggestions on how to resolve this issue and allow the successful navigation to different paths via URL.
Note, if I try to access these url paths using the built in react Link component and clicking on the link, its works as expected, but when refreshing the page at the url, I get the Cannot GET signup error again.
app.js
import React from "react";
import NavigationBar from '../components/navigation-bar';
export class App extends React.Component {
render() {
return (
<div className="container">
<NavigationBar />
{this.props.children}
</div>
);
}
}
index.js
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import {createStore} from "redux";
import allReducers from "./reducers";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {App} from "./components/app";
import {Greetings} from "./components/greetings";
import {Signup} from "./components/signup";
const store = createStore(allReducers);
ReactDOM.render(
<Provider store={store}>
<Router>
<App>
<Switch>
<Route exact path="/" component={Greetings} />
<Route path="/signup" component={Signup} />
</Switch>
</App>
</Router>
</Provider>, window.document.getElementById("app"));
greetings.js
import React from "react";
export class Greetings extends React.Component {
render() {
return (
<h2>
Greetings
</h2>
);
}
}
signup.js
import React from "react";
export class Signup extends React.Component {
render() {
return (
<h2>
SIGN UP
</h2>
);
}
}
Try using HashRouter over BrowserRouter because to use BrowserRouter web server must be ready to handle real URLs.
import {HashRouter as Router, Route, Switch} from "react-router-dom";

react-router-dom gives error

I have following implementation of "react-router-dom", but I am not able to get it working. can someone guide me what's the underlying issue.
App.jsx
import React from "react";
import Main from "../components/Main";
import Home from "../components/Home";
import { BrowserRouter, Match, Miss, Link } from 'react-router-dom';
const App = () => (
<BrowserRouter>
<div>
<Match exactly pattern="/" component={Main} />
<Match pattern="/home" component={Home} />
</div>
</BrowserRouter>
);
export default App;
Index.jsx
import React from "react";
import ReactDOM from "react-dom";
import Main from "./components/Main";
import Home from "./components/Home";
import Page from './components/Page';
import App from "./config/App";
ReactDOM.render(
<App/>,
document.getElementById('app')
);
I get the following error :
Please refer to the docs of React Router v4
Match and Miss are from previous versions of react-router-v4.alpha
With the current stable release of v4. You should use Route instead of Match. Miss is not there anymore.
I think this should solve your problem.
First of all, you should use Route instead of match.
Second, imports are case sensitive.
Third, match as per the doc you will get match object as prop.

Categories